Разработка Web-приложений на Angular JS — доклад Бориса Левицкого, архитектора ПО в команде портфеля проектов Enviance компании Softengi. Видео с докладом от автора можно посмотреть по ссылке: http://youtu.be/oTXxrmIxo8Y Презентация ответит на вопросы: - что такое Angular? - для чего он используется и что с ним можно делать? - как работает Data-Binding? - кастомные фильтры - структура Angular приложения Архитектурные семинары Softengi - еженедельные встречи, на которые приглашаются ведущие разработчики/архитекторы Softengi и других компаний нашего консорциума Intecracy Group. Все проведенные семинары мы записывали, и теперь хотим поделиться опытом и знаниями с такими же профессионалами. Подписывайся на канал Softengi https://www.youtube.com/user/softengi и узнай первым о новых семинарах. http://www.softengi.com

1. Разработка Web-приложений
на Angular JS
Докладчик:
Левицкий Борис
Software Architect, Softengi

3. Data Binding
Большинство
темплейтных систем
Angular JS

4. Data Binding
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="qty" required >
</div>
<div>
Costs: <input type="number" ng-model="cost" required >
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div></div>
Live Demo

5. Под капотом: Модель - Scope

6. Как работает Data-Binding
ng-click
$scope.$eval():
custom-code
$rootScope.$digest():
loop through all child scopes:
$scope.$digest()
$scope.$digest():
process all watchers in loop

7. Недостатки
● Достоинства
o “Чистая” модель
o Выражения вплоть до использования функций в data binding’е
● Недостатки
o Нужно вызывать $scope.$apply(); для кода “извне”
o Слишком большое количество watcher’ов могут существенно
замедлить производительность

8. Наследование Scope
Важно: Данные лучше хранить объедененными в один объект-модель, чем
отдельными свойствами в scope.

9. Контроллеры
Live Demo

10. Контроллер как модель
<div ng-app ng-controller="MyCtrl as ctrl">
Hello, {{ctrl.name}}!
<button ng-click="ctrl.action()">Click</button></div>
Live Demo

11. Директивы
Фактически позволяют расширять возможности HTML
Пример: Angular JS Todo App Example
Важно: Директивы призваны расширять UI и не должны содержать бизнес
логику или другой view-independent код.

12. Cоздание собственных директив
Примеры директив от Angular JS

13. Фильтры
Позволяют производить дополнительную обработку значений перед записью во View
тем самым снимая отвественность за это с модели.
In HTML Template Binding
{{ filter_expression | filter : expression : comparator}}
In JavaScript
$filter('filter')(array, expression, comparator)

14. Пример кастомного фильтра
//Возвращает новый массив, где пропущенно указанное количество элементов в //исходном
массиве
module.filter('skip', [function () {
return function (arr, count) {
return arr ? arr.slice(count) : arr;
};
}])
//Использование
<tr data-ng-repeat="metric in Metrics | skip:pagination.getSkipCount() | limitTo: pagination.pageSize">

15. Валидация
ng-form - автоматически отражает состояние формы и
её контроллов в виде модели внутри Scope
● Информация о валидности каждого поля или всей вормы сразу
● Список ошибок, связанных с каждым полем формы
● Понимает HTML5 валидационные атрибуты
Ng-Form Validation Live Demo
ngModel Custom Validation Demo

16. View Independent Code
Application Structure, Services

17. Структура
Angular
приложеня

18. Типы сервисов
● Constant
● Value
● Factory
● Service
● Provider

19. Constant, Value
Value - application-wide сервис-объект, который может быть инжектирован
в инстансы и контроллеры.
Constant - application-wide сервис-объект, который может быть
инжектирован в инстансы и контроллеры а также в функции конфигурации
приложеня. Может быть изменен.

21. Factory
Позволяет создать Singleton объект
доступный во всем приложении.
Live Demo

22. Service
function MyService() {
}//Factory
app.factory('MyService', function() {
return new MyService();
})//Equivalent Service
app.service('MyService', MyService)

23. Provider
Жизненный цикл приложения
● Config - этап конифигурации провайдеров.
Только провайдеры и константы могут быть инжектированы.
● Run - этап инициализации приложения.
Только инстансы и константы могут быть инжектированы.
Доступен корневой скоуп приложения - $rootScope
Provider - factory, который позволяет выполнить кастомную конфигурацию
на сonfig этапе
Live Demo

24. Injector - Иньекция зависимостей
//Annotated injection
app.controller('Ctrl1', function ($scope, myService) { … });//'Safe' annotated
injection (RECOMMENDED)
app.controller('Ctrl2', ['$scope', 'myService', function ($scope, myService) { …
}]);//Explicit injectionfunction Ctrl3($scope, myService) { … }
Ctrl3.$injector = ['$scope', 'myService'];
app.controller('Ctrl3', Ctrl3);
//Manual injectionvar $injector = angular.injector();
//Get instancevar service = $injector.get('serviceA');
//Invoke function with injections$injector.invoke(['serviceA',
function(serviceA){}]);

25. Стандартные сервисы Angular
● $http - ajax запросы (использует промисы)
● $location - манипулиции с window.location
● $rootScope - корневая модель приложения
● $rootElement - корневой HTML элемент приложения
● $q - реализация промисов
● $log - логирование (можно отключать debug режим)
● $cookies - работа с куками
Полный список сервисов

26. Роутинг
Angular JS Routing Example

27. Организация структуры приложения
● Простая схема - по типу файлов
● Модуальная схема - по модулям/подсистемам

28. Организация по типу файлов
.app
partials - все view приложения
usersedit.tpl.html
admindashboard.html
controllers - все контроллеры приложения
usersedit.js
admindashboard.js
services
service1.js
service2.js
.app.js - конфигурация и инициализация всех модулей
.routes.js - декларация роутинга для всех модулей

29. Недостатки простой
схемы в больших приложениях
● Неудобно переключаться между view.tpl.html и
controller.js файлами
● “Размазанность” подсистемы по различным
папкам и файлам. Дублирование веток дерева:
○ Views..
○ Controllers..
○ services..
○ routes.js
○ app.js

30. Модульная структура
.app
users - Подсистема “Пользователи”
edit
edit.tpl.html
edit.ctrl.js
view
view.tpl.html
view.ctrl.js
admin - Подсистема “Администрирования”
services - Специфичные сервисы подсистемы
adminService.js
dashboard
dashboard.tpl.html
dashboard.ctrl.js
services - общие сервисы для всей системы
dataService.js
securityService.js
.app.js - декларация модуля всего приложения, регистрация зависимостей на другие
модули

31. Задача каждого модуля
● Конфигурация внутренних и внешних сервисов
● Регистрация роутинга
● Регистарция других компонентов
o Регистарция пунктов главного меню
● Инциализация модуля

32. Демонстрация модульной структуры
приложения Modern Security Technology
Suite

33. $resource
Позволяет создать объект-инкапуслирующий основные запросы к
REST сервисам на основе URL-шаблона
Article