Приведите в порядок ваши угловые контроллеры с заводами и сервисами

 app.controller("DribbbleController", function($scope, $http){ ... $scope.likeScore = function(player) { return player.likes_received_count - player.likes_count; }; $scope.commentScore = function(player) { return player.comments_received_count - player.comments_count; }; }); 

Перезагрузите страницу, добавьте несколько игроков, и вы должны увидеть оценку «Нравится» (L) и «Комментарий» (C) для каждого игрока.

Посмотрите на этот контроллер!

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

 app.controller("DribbbleController", function($scope, $http) { $scope.newPlayer = null; // Our model value is null by default $scope.players = []; // We'll start with an empty list // Fetches a Dribbble player and adds them to the list $scope.addPlayer = function(player) { $http.jsonp( 'http://api.dribbble.com/players/' + player + '?callback=JSON_CALLBACK' ).success(function(dribbble_player) { $scope.players.push(dribbble_player); // Here we add the dribbble_player object to the list }).error(function() { // handle errors }); }; $scope.removePlayer = function(player) { $scope.players.splice($scope.players.indexOf(player), 1); }; $scope.likeScore = function(player) { return player.likes_received_count - player.likes_count; }; $scope.commentScore = function(player) { return player.comments_received_count - player.comments_count; }; }); 

Мы можем сделать лучше, чем это.

Использование угловой фабрики для абстрагирования наших проблем

Добавление и удаление игрока — это две концепции, которые принадлежат контроллеру. Дело не в том, что контроллер предоставляет эти функции, а в том, что он также отвечает за их реализацию. Разве не было бы лучше, если бы функция контроллера addPlayer() просто передавала этот запрос другой части приложения, которая могла бы обрабатывать все входы и выходы при фактическом добавлении проигрывателя. Ну, вот тут-то и появляются фабрики AngularJS.

Создание нашей фабрики

Если мы думаем в объектно-ориентированных терминах, мы имеем дело с объектом игрока Dribbble. Итак, давайте создадим фабрику, которая сможет производить плееры Dribbble. Мы просто реализуем это в том же файле app.js для простоты:

 app.controller("DribbbleController", function($scope, $http) { ... }); app.factory("DribbblePlayer", function() { // Define the DribbblePlayer function var DribbblePlayer = function(player) { }; // Return a reference to the function return (DribbblePlayer); }); 

Вы заметите, что мы определили DribbblePlayer с заглавным синтаксисом. Это потому, что это функция конструктора. Также обратите внимание, что функция конструктора принимает параметр player. Когда мы добавим эту фабрику в наш контроллер, мы сможем вызвать new DribbblePlayer(player) и вернуть его new DribbblePlayer(player) экземпляр, сконфигурированный для этого игрока.

Давайте добавим функцию инициализации в конструктор DribbblePlayer чтобы установить некоторые свойства по умолчанию:

 // We need to inject the $http service in to our factory app.factory("DribbblePlayer",function($http) { // Define the DribbblePlayer function var DribbblePlayer = function(player) { // Define the initialize function this.initialize = function() { // Fetch the player from Dribbble var url = 'http://api.dribbble.com/players/' + player + '?callback=JSON_CALLBACK'; var playerData = $http.jsonp(url); var self = this; // When our $http promise resolves // Use angular.extend to extend 'this' // with the properties of the response playerData.then(function(response) { angular.extend(self, response.data); }); }; // Call the initialize function for every new instance this.initialize(); }; // Return a reference to the function return (DribbblePlayer); }); 

Здесь есть несколько вещей, на которые стоит обратить внимание:

Мы определяем переменную self как ссылку на this в этом контексте это DribbblePlayer экземпляр DribbblePlayer . Мы делаем это так, чтобы экземпляр был доступен для расширения в обратном вызове then() обещания.

Мы также используем angular.extend() чтобы добавить все свойства игроков Dribbble, которые мы получили от API, в наш экземпляр DribbblePlayer . Это эквивалентно выполнению:

 playerData.then(function(response) { self.name = response.data.name; self.likes_count = response.data.likes_count; // etc }); 

Мы вызываем this.initialize() сразу после его определения. Это делается для имитации нормального поведения ООП, когда определение конструктора или метода initialize() приведет к выполнению этого метода при создании нового экземпляра этого класса.

Используя Фабрику

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

 ... // Inject DribbblePlayer into your controller and remove the $http service app.controller("DribbbleController", function($scope, DribbblePlayer) { $scope.newPlayer = null; $scope.players = []; $scope.addPlayer = function(player) { // We can push a new DribbblePlayer instance into the list $scope.players.push(new DribbblePlayer(player)); $scope.newPlayer = null; }; ... }); 

Перезагрузите приложение в браузере, и оно должно работать так же, как и раньше. Разве это не круто?

Что именно здесь происходит?

Напомним, что мы DribbblePlayer нашу фабрику DribbblePlayer в наш контроллер. Фабрика позволяет нам создавать новые экземпляры DribbblePlayer конструктора DribbblePlayer . Метод initialize() использует параметр имени игрока, чтобы получить сведения об игроке из Dribbble и установить их в качестве свойств экземпляра. И наконец, именно этот экземпляр мы запихиваем в наш список.

Нам вообще не нужно менять DOM, потому что он ожидает объекты, которые имеют name и like_count , и это именно то, что мы ему даем.

Это действительно того стоило?

Абсолютно! Мы не только упростили наш контроллер, мы разделили наши проблемы. Наш контроллер больше не занимается реализацией добавления плеера. Мы могли бы заменить new DribbblePlayer() на new BaseballSuperstar() , и нам нужно было бы изменить только одну строку кода. Более того, теперь мы можем абстрагировать и другие части контроллера, используя более читаемый и масштабируемый подход ООП.

Давайте перенесем likeScore() и commentScore() в нашу фабрику и установим их как методы для каждого экземпляра игрока, а не функции, которые принимают параметр player:

 ... this.initialize = function(argument) { ... }; this.likeScore = function() { return this.likes_received_count - this.likes_count; }; this.commentScore = function() { return this.comments_received_count - this.comments_count; }; } 

Теперь каждый раз, когда мы вызываем new DribbblePlayer(player) возвращаемый объект будет иметь метод commentScore() метод commentScore() . Они должны оставаться как функции, а не свойства, чтобы в каждом из циклов $digest Angular они генерировали новые значения, представляющие любые потенциальные изменения в модели DribbblePlayer .

Нам нужно обновить нашу DOM, чтобы отразить эти изменения:

 <ul class="list-group"> <li class="list-group-item" ng-repeat="player in players"> <!-- We can now use player.likeScore instead of likeScore(player) --> {{player.name}} L: {{player.likeScore()}} C:{{player.commentScore()}} <a href="" ng-click="removePlayer(player)"> <i class="glyphicon glyphicon-remove pull-right"></i> </a> </li> </ul> 

Завершение

Я попытался продемонстрировать, насколько легко для нас написать код, который просто «заставляет его работать», и чтобы этот код очень быстро вышел из-под контроля. Мы закончили с грязным контроллером, полным функций и обязанностей. Однако после некоторого рефакторинга наш файл контроллера теперь выглядит так:

 app.controller("DribbbleController", function($scope, DribbblePlayer) { $scope.newPlayer = null; $scope.players = []; $scope.addPlayer = function(player) { $scope.players.push(new DribbblePlayer(player)); }; $scope.removePlayer = function(player) { $scope.players.splice($scope.players.indexOf(player), 1); }; }); 

Он гораздо более читабелен и очень мало заботится о нем — вот что такое рефакторинг. Я надеюсь, что я предоставил вам инструменты, необходимые для начала, чтобы рассмотреть лучшие подходы к структурированию ваших приложений AngularJS. Удачного рефакторинга!

Код из этого урока доступен на GitHub !

Дополнительный кредит

Мы, конечно, улучшили addPlayer() , но зачем останавливаться на достигнутом? Вот несколько других улучшений, которые мы могли бы сделать:

• Абстрагируйте вызов $http в ресурс Angular, чтобы отделить постоянство / выделение ресурсов. Затем вы можете добавить ресурс на свою фабрику, чтобы использовать его.
• Создайте фабрику PlayerList для управления списком, включая добавление, удаление и сортировку. Таким образом, вы можете абстрагировать методы push() и splice() стоящие за PlayerList.add() и PlayerList.remove() чтобы вы не зависели от этой реализации непосредственно внутри вашего контроллера.