среда, 16 октября 2013 г.

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

При создании приложений на 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 приложение:
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;
                });
        }
});


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


Заключение




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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:



на

Комментариев нет:

Отправить комментарий