Блог Makeomatic: разработка сайтов и мобильных приложений

Предположим вы переработали функцию, находящуюся в $scope в фильтр:

1
2
3
4
5
6
7
8
9
10

/// Counts char number excluding spaces. Three dots count as one.
// TODO: refactor text transformation in a separate filter
editor.filter("numChar", function() {
    return function(theText) {
        return theText
            .replace(/\n/g, "")
            .replace(/\.\.\./g,"\u2026")
            .length;
    };
});

Трансформируем приложение

Переделывая Rails приложение на Angular, я столкнулся с селектом, который грузил некоторые названия штатов США из yaml файла.

Если вы частенько натыкаетесь на $apply already in progress, пока работаете с ангуляром (я замечаю, что чаще всего с этим сталкиваюсь, когда внедряю сторонние плагины, которые вызывают большое количество DOM событий), то вы можете использовать сервис safeApply для проверки текущей фазы обработки в ангуляре, непосредственно перед выполнением вашей функции. Я обычно патчу $scope объект основного контроллера, а Angular распространяет мои изменения в остальные части приложения за меня:

Давайте выясним как использовать Декораторы (Decorators) для улучшения логирования в AngularJS и придания суперсил $log сервису. AngularJS имеет отличную скрытую возможность - $provider.decorator(). Она позволяет разработчикам перехватывать выполнение вызовов к сервисам и убирать, контролировать или изменять возможности этих сервисов. Возможность декорирования была спрятана не специально… скорее она затерялась среди других отличных возможностей AngularJS. В этой статье я представлю Decorator и покажу как постепенно добавлять функциональность к $log сервису… при этом практически не меняя созданные вами сервисы и контроллеры.

Расширение колбэков http запросов в AngularJS

В этом примере мне хочется показать вам как я реализовываю $rootScope.$apply() для каждого вызова REST api. Это всего лишь пример того, как вы можете расширить колбэки функции если мы предполагаем, что колбэк при обращении к REST api всегда находится в функции на последнем месте.

Ангуляр для jQuery разработчиков

Один из наиболее часто задаваемых вопросов при ангуляре - это то, как переключиться на AngularJS. Ведь до этого вы постоянно работали с jQuery, где ручная манипуляция деревом DOM – это обычная практика при добавлении интерактивности вашим веб страницам.

AngularJS используется для написания одностраничных веб приложений. Принимая во внимание сущность одностраничных приложений, заголовок устанавливается 1 раз при первичной загрузке данных, и даже если вы перейдете на страницу с продуктом или на информацию о сайте, вы будете видеть все тот же заголовок в браузере.

Я работаю с Angular.JS почти год, с того момента как появился логотип Google на сайте фреймворка. Работа с ним последние 10 месяцев занимала у меня от 20 до 40 часов в неделю. Используя Angular.JS я написал несколько расширений для Chrome, мобильных и веб приложений, модулей и одностраничных приложений (SPA’s).

Что такое области видимости в Angular.js?

Scope, оно же область видимости - это объект, ссылающийся на своеобразную модель приложения. Это контекст, в котором
исполняются и обрабатываются выражения.

Области видимости представляют из себя иерархическую структуру, которая копирует DOM вашего приложения. Области видимости могут наблюдать за изменениями значений выражений, исполняющихся в их контексте и
способны распространять события.

По сути scope - это сердце вашего приложения, в котором и происходит вся “магия”.

Как писать интеграционные тесты с использованием $httpBackend из набора Angular-mocks

Как обычно достаточно пространное описание в документации не дает четкого представления о том, как же все-таки делать
адекватные заглушки для ответа.

Приводим ответ в виде примера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var backendService = angular.module("backendService", ["nameOfYourApp", "ngMockE2E"]);
backendService.run([
  "$httpBackend",
  function ($httpBackend) {
    
    $httpBackend.when("GET", /^\/uri\/to\/match$/).respond(function(method, url, params){
      // здесь самое интересное - формат ответа. Он обязательно должен быть в виде массива
      // 1 элемент - код ответа, Number
      // 2 элемент - строка с ответом, String
      // 3 элемент - дополнительные Headers, Object
      return [ 200, JSON.stringify({success:true, hello: "World!"}), {} ];
    });
  }
]);

Подготовка

Модульная структура

Как я уже писал ранее, AngularJS является достаточно структурированной библиотекой. Практически каждый элемент функциональности выделен в свой модуль: $http, $resource, $route, $location и так далее. Фактически сама библиотека сконцентрирована в модуле Core. Подключать его не нужно (как и многие другие модули, вроде $http), поскольку он входит в основу библиотеки.

Начиная с версии 1.1.6 модуль $route нужно подключать отдельно, поскольку было принято решение исключить его из ядра и впоследствии объединить с модулем ui.state от команды AngularUI.

Расширение функциональности

Следует заметить, что вызов angular.module может работать по-разному в зависимости от переданных ему параметров. Если переданное первым параметром имя модуля соответствует уже существующему модулю, то вызов вернёт ссылку на этот модуль, если же такого модуля нет, то он предварительно будет создан.

Это позволяет держать код в разных файлах и не заботиться о последовательности их подключения/склейки. Достаточно лишь в начале каждого файла написать

1

var myModule = angular.module("MyModule")