При создании приложений на AngularJS у начинающего разработчика возникает много вопросов, особенно в том случае, если до определенного времени он использовал библиотеки сходные с jQuery или Prototype. В данном посте хотелось бы поделиться некоторыми приемами, которые будут полезны начинающим 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;
});
}
});
Теперь, при наличии данных в кэше, запрос на получение альбомов не будет выполнен.
Заключение
Данные приемы не претендуют на истину в первой инстанции. Буду рад увидеть в комментариях ваши способы, отличные от предложенных мной.
Автор: mamiamradio
А есть еще более изящное решение для получения данных в PHP, нашел на хабре:
$params = json_decode(file_get_contents('php://input'));
или так
$params = json_decode(trim(file_get_contents(‘php://input’)), true);