Каталог технического сотрудничества NBP€¦ · Семинары и семинары-практикумы являются неотъемлемой
Разработка Web-приложений на Angular JS. Архитектурные...
-
Upload
softengi-inspired-software-engineering -
Category
Education
-
view
692 -
download
0
description
Transcript of Разработка Web-приложений на Angular JS. Архитектурные...
![Page 1: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/1.jpg)
Разработка Web-приложений на Angular JS
Докладчик: Левицкий Борис
Software Architect, Softengi
![Page 2: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/2.jpg)
![Page 3: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/3.jpg)
Data Binding
Большинство темплейтных систем
Angular JS
![Page 4: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/4.jpg)
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
![Page 5: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/5.jpg)
Под капотом: Модель - Scope
![Page 6: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/6.jpg)
Как работает Data-Binding
ng-click
$scope.$eval(): $rootScope.$digest(): loop through all child scopes:
$scope.$digest()
$scope.$digest(): process all watchers in loop
custom-code
![Page 7: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/7.jpg)
Недостатки
● Достоинстваo “Чистая” модельo Выражения вплоть до использования функций в data binding’е
● Недостаткиo Нужно вызывать $scope.$apply(); для кода “извне”o Слишком большое количество watcher’ов могут существенно
замедлить производительность
![Page 8: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/8.jpg)
Наследование Scope
Важно: Данные лучше хранить объедененными в один объект-модель, чем отдельными свойствами в scope.
![Page 10: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/10.jpg)
Контроллер как модель<div ng-app ng-controller="MyCtrl as ctrl">
Hello, {{ctrl.name}}!
<button ng-click="ctrl.action()">Click</button></div>
Live Demo
![Page 11: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/11.jpg)
Директивы
Фактически позволяют расширять возможности HTML
Пример: Angular JS Todo App Example
Важно: Директивы призваны расширять UI и не должны содержать бизнес логику или другой view-independent код.
![Page 12: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/12.jpg)
Cоздание собственных директив
Примеры директив от Angular JS
![Page 13: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/13.jpg)
ФильтрыПозволяют производить дополнительную обработку значений перед записью во View тем самым снимая отвественность за это с модели.
In HTML Template Binding
{{ filter_expression | filter : expression : comparator}}
In JavaScript
$filter('filter')(array, expression, comparator)
![Page 14: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/14.jpg)
Пример кастомного фильтра
//Возвращает новый массив, где пропущенно указанное количество элементов в //исходном
массиве
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">
![Page 15: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/15.jpg)
Валидация
ng-form - автоматически отражает состояние формы и её контроллов в виде модели внутри Scope
● Информация о валидности каждого поля или всей вормы сразу
● Список ошибок, связанных с каждым полем формы
● Понимает HTML5 валидационные атрибуты
Ng-Form Validation Live DemongModel Custom Validation Demo
![Page 16: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/16.jpg)
View Independent CodeApplication Structure, Services
![Page 17: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/17.jpg)
Структура Angularприложеня
![Page 18: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/18.jpg)
Типы сервисов
● Constant● Value● Factory● Service● Provider
![Page 19: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/19.jpg)
Constant, Value
Value - application-wide сервис-объект, который может быть инжектирован в инстансы и контроллеры.
Constant - application-wide сервис-объект, который может быть инжектирован в инстансы и контроллеры а также в функции конфигурации приложеня. Может быть изменен.
![Page 20: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/20.jpg)
![Page 21: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/21.jpg)
Factory
Позволяет создать Singleton объект доступный во всем приложении.
Live Demo
![Page 22: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/22.jpg)
Service
function MyService() {}//Factoryapp.factory('MyService', function() { return new MyService();})//Equivalent Serviceapp.service('MyService', MyService)
![Page 23: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/23.jpg)
Provider
Жизненный цикл приложения
● Config - этап конифигурации провайдеров. Только провайдеры и константы могут быть инжектированы.
● Run - этап инициализации приложения. Только инстансы и константы могут быть инжектированы. Доступен корневой скоуп приложения - $rootScope
Provider - factory, который позволяет выполнить кастомную конфигурацию на сonfig этапе
Live Demo
![Page 24: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/24.jpg)
//Annotated injectionapp.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){}]);
Injector - Иньекция зависимостей
![Page 25: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/25.jpg)
Стандартные сервисы Angular● $http - ajax запросы (использует промисы)
● $location - манипулиции с window.location
● $rootScope - корневая модель приложения
● $rootElement - корневой HTML элемент приложения
● $q - реализация промисов
● $log - логирование (можно отключать debug режим)● $cookies - работа с куками
Полный список сервисов
![Page 27: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/27.jpg)
Организация структуры приложения
● Простая схема - по типу файлов● Модуальная схема - по модулям/подсистемам
![Page 28: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/28.jpg)
Организация по типу файлов.\app
\partials - все view приложенияusers\edit.tpl.htmladmin\dashboard.html
\controllers - все контроллеры приложения\users\edit.js\admin\dashboard.js
\servicesservice1.jsservice2.js
.\app.js - конфигурация и инициализация всех модулей
.\routes.js - декларация роутинга для всех модулей
![Page 29: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/29.jpg)
Недостатки простой схемы в больших приложениях
● Неудобно переключаться между view.tpl.html и controller.js файлами
● “Размазанность” подсистемы по различным папкам и файлам. Дублирование веток дерева:○ Views\..○ Controllers\..○ services\..○ routes.js○ app.js
![Page 30: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/30.jpg)
Модульная структура.\app
\users\ - Подсистема “Пользователи” edit\edit.tpl.htmledit.ctrl.js
view\view.tpl.htmlview.ctrl.js
\admin\ - Подсистема “Администрирования”services\ - Специфичные сервисы подсистемы
adminService.jsdashboard\dashboard.tpl.htmldashboard.ctrl.js
\services\ - общие сервисы для всей системы dataService.jssecurityService.js
.\app.js - декларация модуля всего приложения, регистрация зависимостей на другие модули
![Page 31: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/31.jpg)
Задача каждого модуля
● Конфигурация внутренних и внешних сервисов● Регистрация роутинга● Регистарция других компонентов
o Регистарция пунктов главного меню● Инциализация модуля
![Page 32: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/32.jpg)
Демонстрация модульной структуры приложения Modern Security Technology Suite
![Page 33: Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi](https://reader036.fdocuments.net/reader036/viewer/2022081508/557ed14dd8b42ae27f8b4e52/html5/thumbnails/33.jpg)
$resource
Позволяет создать объект-инкапуслирующий основные запросы к REST сервисам на основе URL-шаблона
Article