AngularJS: руководство по внедрению фабрики, сервиса, директивы или чего-то еще

Я очень новичок в angularjs и нуждаюсь в некоторых советах об угловом способе реализации чего-то очень простого. В моем $ scope мне нужно установить некоторые поля по умолчанию, и эти значения по умолчанию необходимы несколько раз в моем контроллере.

Я хочу иметь возможность рефакторировать эти значения по умолчанию в общее место, чтобы проредить контроллер и разрешить повторное использование кода, но не уверен, что это должно быть фабрикой, директивой или службой.

Вот пример значений по умолчанию: 

$scope.skills = [{
  description: '',
  years: "1",
  level: "0",
  years_values: [
    { id: "1", description: "1" },
    { id: "2", description: "2" },
    { id: "3", description: "3+" }],
  level_values: [
    { id: "0", description: "Starter"},
    { id: "1", description: "Intermediate"},
    { id: "2", description: "Advanced"} ]
}]

Вот пример: пример того, где я хотел бы вызвать "новую функцию": 

skillSuccess = (resp)->
  Loader.hide();
  $rootScope.current_user = resp;
  #TODO replace this repetition
  $scope.skills = [{
    description: '',
    .... etc

Мои вопросы:

  1. должен ли я использовать фабрику / директиву/сервис (или что-то еще) для это рефакторинг?
  2. Как я могу гарантировать, что функция будет вызвана изначально, чтобы значения по умолчанию были доступны для полей когда страница загружается?
2 2
javascript angularjs angularjs-service angularjs-factory angularjs-controller

2 ответа:

Должен ли я использовать фабрику / директиву / сервис (или что-то еще) для этого рефакторинга?

Контроллер должен использоваться для задания области видимости, но значения по умолчанию должны храниться как константа и возвращаться фабрикой. Фабричный шаблон предпочтительнее здесь, потому что это синглтон.

angular.module('myApp')
    .factory('skillsFactory', function (defaultSkills) {
        var service = {};

        service.getDefaults = function () {
            return defaultSkills;
        };

        return service;
    })
    .constant('defaultSkills', [{
        description: '',
        years: "1",
        level: "0",
        years_values: [{
            id: "1",
            description: "1"
        }, {
            id: "2",
            description: "2"
        }, {
            id: "3",
            description: "3+"
        }],
        level_values: [{
            id: "0",
            description: "Starter"
         }, {
            id: "1",
            description: "Intermediate"
        }, {
            id: "2",
            description: "Advanced"
        }]
    }]);

Как я могу гарантировать, что функция будет вызвана изначально, чтобы значения по умолчанию были доступны для полей при загрузке страницы?

В вашем контроллер, вызов $scope.skills = skillsFactory.getDefaults(); 

angular.module('myApp')
    .controller('skillsCtrl', function ($scope, skillsFactory) {
        $scope.skills = skillsFactory.getDefaults();
    });
0

Должен ли я использовать завод / директиву/сервис (или что-то еще) для этого рефакторинг?

Я бы предложил вам создать constant, потому что похоже, что у вас есть defaults данные, которые изначально имеют некоторое значение, и которые будут изменены пользователем из внешнего интерфейса. Таким образом, вы можете поместить это в угловую константу, тогда эта константа будет доступна заводу/службе. И Фабрика / обслуживание сделает необходимую манипуляцию от своей функции. Сделать доступной константу в вашем сервисе / заводе вам нужно ввести постоянное имя в свой сервис.

Рассматривая ваше текущее требование, вы не должны принимать во внимание компонент directive.

Константа 

app.constant('defaults', [{
  description: '',
  years: "1",
  level: "0",
  years_values: [
    { id: "1", description: "1" },
    { id: "2", description: "2" },
    { id: "3", description: "3+" }],
  level_values: [
    { id: "0", description: "Starter"},
    { id: "1", description: "Intermediate"},
    { id: "2", description: "Advanced"} ]
}]);

Сервис 

app.service('dataService', function(defaults){
   var dataService = this;
   dataService.defaults = defaults; 
   dataService.defaults = angular.copy(defaults) //will return same copy every-time
   dataService.getDefaults = function(){
     return dataService.defaults; 
   }
   //other method will lie here
})

Как я могу гарантировать, что функция будет вызвана изначально, чтобы значения по умолчанию были доступны для полей при загрузке страницы?

Вы можете просто получить эти значения по умолчанию, используя метод getDefaults ваш сервис, а затем сохраненные, что извлеченные значения по умолчанию и использовать их для манипулирования. Если вы хотите, чтобы копия defaults создавалась каждый раз, то используйте angular.copy(defaults), который даст вам копию defaults.

Контроллер 

app.controller('myCtrl', function($scope, dataService){
   $scope.defaults = dataService.getDefaults(); //this will have defaults
   //...other stuff here...
});
1