devdropper87 devdropper87 - 6 months ago 36
AngularJS Question

Playing FizzBuzz in Angular

I have successfully implemented FizzBuzz in angular, and was wondering if I am doing everything according to Angular Best Practices. My questions:
1) Is there any way to set $scope.display in the factory directly instead of returning something? so instead of "return FIZZ" could I do $scope.display = "FIZZ" there?
2) do i really need separate $scope.counter and $scope.display variables?

Code:

angular.module('fizzbuzz', [])


.factory("Counter", function() {
var increment = function(number) {
if (number % 3 === 0 && number % 5 === 0) {
//any way to set $scope.display directly here?
return "FIZZBUZZ"
}
if (number % 3 === 0) {
return "FIZZ"
}
if (number % 5 === 0) {
return "BUZZ"
}
return number;
}
return {
increment: increment
}
})

.controller("FizzBuzz", function($scope, Counter) {
// is there any way to do this without a separate counter variable?
$scope.display = 0;
$scope.counter = 0;
$scope.increment = function() {
//increment the counter before going into the function, reacting to ng-click
$scope.counter++;
//call the factories function to actually display
$scope.display = Counter.increment($scope.counter);
}
})


//HTML:

<doctype! html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="fizzbuzz.js"></script>
</head>
<body>
<div ng-app="fizzbuzz" ng-controller="FizzBuzz">
<h1 ng-click="increment()"> {{ display }} </h1>
</div>
</body>
</html>


Update:

Took Shaun's suggestion to try this but it did not display anything:

angular.module('fizzbuzz', [])


.factory("Counter", function() {
var service = {};
service.number = 0;
service.display = "";
service.increment = function() {
service.number++;
if (service.number % 3 === 0 && service.number % 5 === 0) {
//any way to set $scope.display directly here?
service.display = "FIZZBUZZ"
}
if (service.number % 3 === 0) {
service.display = "FIZZ"
}
if (service.number % 5 === 0) {
service.display = "BUZZ"
} else {
service.display = service.number;
}
}

return service;
})

.controller("FizzBuzz", function($scope, Counter) {
// can reference method and data from the service
$scope.increment = Counter.increment;
$scope.display = Counter.display;
})

Answer

angular.module('fizzbuzz', [])
    
    
    .factory("Counter", function() {
      var increment = function() {
        service.number++;
        if (service.number % 15 === 0) {
          //any way to set $scope.display directly here?
          service.display = "FIZZBUZZ"
        }
        else if (service.number % 3 === 0) {
          service.display =  "FIZZ"
        }
        else if (service.number % 5 === 0) {
          service.display =  "BUZZ"
        }else{
          service.display = service.number
        }
      }
      var service = {
        increment: increment,
        number:0,
        display: 'Click to start'
      }
      return service;
    })
    
    .controller("FizzBuzz", function($scope, Counter) {
      // can reference method and data from the service
      $scope.Counter = Counter;
    })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Testing
<div ng-app="fizzbuzz" ng-controller="FizzBuzz">
  <h1 ng-click="Counter.increment()"> {{ Counter.display }} {{ Counter.number }} </h1>
</div>

Modified to include an HTML example of usage. Also modified the FIZZ BUZZ logic based on the explanation here: http://c2.com/cgi/wiki?FizzBuzzTest

Comments