Pull to refresh

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

Reading time 5 min
Views 51K
При создании приложений на 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.');
            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 приложение:

Javascript код
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;
		});
	}
});


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

Заключение


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

Articles