Несколько полезных приемов в AngularJS для начинающих

Загрузка приложения и менеджер состояний

До момента загрузки самого фрэймворка, его зависимостей и отработки всех запросов в бэкграунде приложение может выглядеть весьма удручающе. И даже ng-cloak не сможет помочь в большинстве случаев. Обычно для таких целей используют div имеющий больший z-index чем основной контент сайта и перекрывающий его до загрузки всех компонентов и состояний. Он может выглядеть так:

<div class="loader" ng-show="loader"><div class="loader-content">Loading...</div></div> 

а его стили вот так:

    .loader {         position: fixed;         width: 100%;         height: 100%;         z-index: 9;     }      .loader-content {         width: 128px;         height: 128px;         overflow: auto;         margin: auto;         position: absolute;         z-index: 10;         top: 0; left: 0; bottom: 0; right: 0;     } 

В AngularJS мы будем использовать переменную loader, которая будет находится в $rootScope, и в зависимости от ее значения наш div будет скрываться или отображаться в окне браузера. Постоянно изменять значение переменной в $rootScope довольно неудобно, при этом у нас может быть несколько операций, которые будут осуществляться в одно и тоже время, причем в тот момент когда одна из них отработает, вторая может не закончить свою работу. В этом случае загрузчик скроется.

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

'use strict';  app.factory('StateManager', function StatemManager($rootScope, $log) {  	var stateContainer = []; 	 	return {         add: function (service) {             stateContainer.push(service);             $rootScope.globalLoader = true; 			$log.log('Add service: ' + service);         },          remove: function (service) {             stateContainer = _.without(stateContainer, service);             $log.log('Remove service: ' + service);              if (stateContainer.length === 0) {                 $rootScope.globalLoader = false;                 $log.log('StateContainer is empty.');             }          },          getByName: function (service) {             return _.include(stateContainer, service)         },          clear: function () {             stateContainer.length = 0;             $log.log('StateContainer clear.') : false;             return true;          } 	}  }); 

В данном примере используется библиотека underscore, Проще говоря, данный сервис записывает переданное имя процесса в массив и удаляет его по запросу. В случае если массив пустой, $rootScope.loader устанавливается в false. И пример использования:

StateManager.add('Load_json_data'); var request = $http.get('/data.josn'); request.success(function(response) { 	console.log(response); 	StateManager.remove('Load_json_data'); }); 

Конечно это не идеальный вариант, но для понимания принципа работы его достаточно.

Получение событий

Бывают ситуации, когда нам требуется получить событие или элемент из функции контроллера по, предположим, ng-click. Конечно, для этих целей лучше использовать директивы, но случается всякое. К счастью в нашем распоряжении имеется $event:

<ul> 	<li ng-repeat="name in names" ng-bind="name" ng-click="setActive($event);"></li> </ul> 

$scope.names = ['John', 'Peter', 'Joe']; $scope.setActive = function (evt) { 	angular.element(evt.target).addClass('active'); } 

В данном случае при клике по элементу из списка он получит класс active. По сути, angular.element является jqLite и позволяет использовать те самые методы к которым так привыкли любители jQuery.

AngularJS и PHP

Многие новички в AngularJS удивляются тому, что php не может обработать посланный ему POST-запрос. Он попросту не видит его. Все объясняется очень просто. Как говорят сами разработчики, AngularJS заточен под Ruby on Rails, поэтому сериализация данных происходит в формате JSON, непонятному для php. Есть прекрасная статья, описывающая способ избавления от данной проблемы. В случае, если вы хотите добиться работы $http сервиса в стиле jQuery.ajax вам потребуется включить следующий код в свое AngularJS приложение:

angular.module('MyModule', [], function($httpProvider) {   // Use x-www-form-urlencoded Content-Type   $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';     // Override $http service's default transformRequest   $httpProvider.defaults.transformRequest = [function(data)   {     /**      * The workhorse; converts an object to x-www-form-urlencoded serialization.      * @param {Object} obj      * @return {String}      */      var param = function(obj)     {       var query = '';       var name, value, fullSubName, subName, subValue, innerObj, i;              for(name in obj)       {         value = obj[name];                  if(value instanceof Array)         {           for(i=0; i<value.length; ++i)           {             subValue = value[i];             fullSubName = name + '[' + i + ']';             innerObj = {};             innerObj[fullSubName] = subValue;             query += param(innerObj) + '&';           }         }         else if(value instanceof Object)         {           for(subName in value)           {             subValue = value[subName];             fullSubName = name + '[' + subName + ']';             innerObj = {};             innerObj[fullSubName] = subValue;             query += param(innerObj) + '&';           }         }         else if(value !== undefined && value !== null)         {           query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';         }       }              return query.length ? query.substr(0, query.length - 1) : query;     };          return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;   }]; }); 

Кэширование ($cacheFactory)

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

var request = $http.get('/albums.json'); request.success(function (response) { 	$scope.albums = response; }); 

Дело в том, что если пользователь перейдет по другой ссылке, а после вернется обратно, наш код выполнится снова, и запрос на получение альбомов уйдет повторно. Довольно часто нет нужды использовать повторные запросы на сервер после загрузки всего приложения. Ситуаций может быть множество. Для этого и существует $cacheFactory. Попробуем создать простейший кэш-сервис:

app.factory('DataCache', function ($cacheFactory) { 	return $cacheFactory('dataCache', {}); }); 

и использовать его в нашем контроллере:

app.controller('AlbumsCtrl', function (DataCache) {  	var $scope.albums = DataCache.get('albums');  	if (!$scope.albums) { 		var request = $http.get('/albums.json'); 		request.success(function (response) { 			DataCache.put('albums', response); 			$scope.albums = response; 		}); 	} }); 

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

Заключение

Данные приемы не претендуют на истину в первой инстанции. Буду рад увидеть в комментариях ваши способы, отличные от предложенных мной.