В AngularJS какой самый чистый способ объявить завод/услугу?

Question

Каков правильный/самый чистый способ реализации фабрики/сервиса?

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

Во-первых, этот метод:

(function(){ 
var github = function($http) { 
    var getUser = function(username) { 
     return $http.get("https://api.github.com/users/" + username) 
      .then(function(response) { 
       return response.data; 
      }); 
    }; 

    var getRepos = function(user) { 
     $http.get(user.repos_url) 
      .then(function(response) { 
       return response.data; 
      }); 
    }; 

    return { 
     getUser: getUser, 
     getRepos: getRepos 
    }; 
}; 
var module = angular.module("githubViewer"); 
module.factory("github", github); 
}()); 

В недавнем уроке я читал это был использованный метод. Обратите внимание, что внизу я добавляю фабрику с именем, затем функцией. Вызов функции содержит $ http. Из моего понимания того, как (новые) работы с угловыми работами с контроллерами для правильной работы для минимизации, вам нужно передать $ http сначала как строку, а затем использовать его в качестве параметра. Который этот метод не делает.

Далее я переписал его выглядеть следующим образом:

(function(){ 
var github = function($http) { 
    this.getUser = function(username) { 
     return $http.get("https://api.github.com/users/" + username) 
      .then(function(response) { 
       return response.data; 
      }); 
    }; 

    this.getRepos = function(user) { 
     $http.get(user.repos_url) 
      .then(function(response) { 
       return response.data; 
      }); 
    }; 

    return { 
     getUser: getUser, 
     getRepos: getRepos 
    }; 
}; 
var module = angular.module("githubViewer"); 
module.factory("github", ["$http", github($http)]); 
}()); 

Я добавил массив аргументов в заводском вызова. запускал код, и он работает одинаково. Я предполагаю, что это позволит минимизировать? (если раньше у него была проблема). Является ли избыточным добавлять «$ http» к самой фактической функции «var github = function ($ http)»? Потому что я также удалил «$ http», чтобы узнать, что произойдет, и все равно работает, как и ожидалось.

И, наконец, я попытался это:

(function(){ 
var module = angular.module("githubViewer"); 
module.factory("github", 
    ["$http", function($http) { 
     this.getUser = function(username) { 
      return $http.get("https://api.github.com/users/" + username) 
       .then(function(response) { 
        return response.data; 
       }); 
     }; 

     this.getRepos = function(user) { 
      $http.get(user.repos_url) 
       .then(function(response) { 
        return response.data; 
       }); 
     }; 

     return { 
      getUser: getUser, 
      getRepos: getRepos 
     }; 
    }; 
] 
}()); 

Это выглядит чистейшая мне. Вместо передачи помеченной функции я передал анонимную функцию и дал строку для ее представления. Я запустил код, и он работал, как ожидалось. Я также добавил «это» ключевое слово вместо объявления переменной как функции. С или без «этого» он все еще работал.

Теперь вот путаница ... какой лучший способ? Не лучший из них? Я предпочитаю использовать this.name = function над var name = function. Что лучше в этом отношении? Является ли это на самом деле более читаемым использовать

module.factory("github"["$http", function($http) 

против

module.factory("github", github); 

или

module.factory("github", ["$http", github($http)]);" 

И сверх того, должны контроллеры, услуги, фабрики, поставщики все объявляются таким же образом?

Answer 1

Я лично использую следующую форму:

angular.module('myApp').controller('myController', [ 
    '$scope', '$state', '$http', 
    function ($scope, $state, $http) { 
     ... 
    } 
]); 

Когда вы объявляете свои услуги/фабрики/контроллеры и т.д., как это, вы держаться подальше от глобальной области видимости Polution, вы не должны обернуть вас заявление в анонимная функция, плюс это позволяет минимизировать. И, как сказал Джо в другом ответе, использование нотации массива является предпочтительным.

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

angular.module('myApp').controller('myController', [ 
    '$scope', 
    '$state', 
    '$http', 
    function ($scope, $state, $http) { 
     ... 
    } 
]); 

Таким образом, это очень легко увидеть, что получает инъекцию, но труднее сравнивать его с параметры функции. Но это вопрос предпочтения.

Как я вижу, чем меньше кода, тем лучше. Зачем использовать анонимную функцию, если вы можете это сделать без? Чем меньше кода, тем более читаемым оно становится. То же самое с объявлением отдельной функции и назначением этого определения. Для меня это запутывает.

Answer 2

В этом ответе есть много субъективности, однако система DI углов всегда предлагает вам заявить зависимости, как показано на рисунке here. Как всегда, может быть не лучший способ, но есть Угловой путь.

В вашем конкретном случае прокрутите до строки Inline Array Annotation, в ней четко указано, что это предпочтительный способ объявления сервисов.