Игра FizzBuzz в Angular

Я успешно реализовал FizzBuzz в угловатом и задавался вопросом, выполняю ли я все в соответствии с Angular Best Practices. Мои вопросы: 1) Есть ли способ установить $ scope.display на фабрике напрямую вместо того, чтобы что-то возвращать? так что вместо «return FIZZ» я могу сделать $ scope.display = «FIZZ» там? 2) Мне действительно нужны отдельные переменные $ scope.counter и $ scope.display?Игра FizzBuzz в Angular

Код:

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:

принял предложение Шоном, чтобы попробовать это, но ничего не показывает:

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; 
})

источник

2015-09-24 devdropper87

кажется, что это лучше подходит для HTTP: //codereview.stackexchange .com/ –

@NeilS хороший момент отправит туда в следующий раз! – devdropper87

обновил мое сообщение с помощью проблемы с запущенным сниппетом, когда вы копируете значения там, где вы не используете ссылку через исходный объект, поэтому обновления исходных объектов не обновляются эти копии – shaunhusain

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>

Модифицированный включать HTML пример использования. Также была изменена логика FIZZ BUZZ на основе объяснения здесь: http://c2.com/cgi/wiki?FizzBuzzTest

источник

2015-09-24 21:59:04 shaunhusain

Я пробовал ваш подход, но он не работа --- учитывая html, ничего не появляется на экране вообще. Кроме того, спасибо за разъяснение по $ scope, не находясь на заводе. – devdropper87

Редактирование моего кода, чтобы показать, что я пробовал из вашего предложения. – devdropper87

Извините, что изначально короткая почта пыталась сделать это на моем телефоне, так что не могла действительно проверить, просто пришлось написать ее в основном слепым. обновлен с помощью исполняемого фрагмента – shaunhusain

Ваши вопросы: 1) Есть ли способ установить $ scope.display на заводе напрямую, вместо того чтобы что-то возвращать? так что вместо «return FIZZ» я могу сделать $ scope.display = «FIZZ» там?

НЕТ, вы сделали хорошо!

2) Мне действительно нужны отдельные переменные $ scope.counter и $ scope.display?

В вашем контроллере вам не нужно помещать переменную счетчика в область видимости. Это просто переменная приращения.

функция

Ваше приращение() может вернуть номер дисплея, а также:

.controller("FizzBuzz", function($scope, Counter) { 

    // is there any way to do this without a separate counter variable? 
    var counter = 0; 

    $scope.increment = function() { 
    counter++; 
    return (Counter.increment(counter)); 
    } 
});

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()" ng-bind="increment();"> </h1> 
    </div> 
</body> 
</html>

источник

2015-09-24 22:15:19 Nicolas2bert

спасибо --- как ваши изменения повлияют на завод? – devdropper87

Нет, но код чище, и вам не нужно создавать 3 переменные области видимости :) – Nicolas2bert

Игра FizzBuzz в Angular

ответ

Смежные вопросы