Разработка Web-приложений на Angular JS презентация

Содержание

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

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

Слайд 2

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

Слайд 4Data Binding
Invoice: Quantity:

required >
Costs:
Total: {{qty * cost | currency}}

Live Demo

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

Слайд 6Как работает Data-Binding
ng-click
$scope.$eval():
$rootScope.$digest():
loop through

all child scopes:
$scope.$digest()

$scope.$digest():
process all watchers in loop

custom-code

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

для кода “извне”
Слишком большое количество watcher’ов могут существенно замедлить производительность

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

свойствами в scope.

Слайд 9Контроллеры
Live Demo

Слайд 10Контроллер как модель
Hello, {{ctrl.name}}!


Live Demo

Слайд 11Директивы
Фактически позволяют расширять возможности HTML

Пример: Angular JS Todo App Example

Важно: Директивы

призваны расширять UI и не должны содержать бизнес логику или другой view-independent код.


Слайд 12Cоздание собственных директив
Примеры директив от 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; }; }])

//Использование



Слайд 15Валидация
ng-form - автоматически отражает состояние формы и её контроллов в виде

модели внутри Scope
Информация о валидности каждого поля или всей вормы сразу
Список ошибок, связанных с каждым полем формы
Понимает HTML5 валидационные атрибуты


Ng-Form Validation Live Demo
ngModel Custom Validation Demo

Слайд 16View Independent Code
Application Structure, Services

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

Слайд 18Типы сервисов
Constant
Value
Factory
Service
Provider

Слайд 19Constant, Value
Value - application-wide сервис-объект, который может быть инжектирован в инстансы

и контроллеры.

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

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

Live Demo

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

MyService)

Слайд 23Provider
Жизненный цикл приложения
Config - этап конифигурации провайдеров.
Только провайдеры и константы

могут быть инжектированы.
Run - этап инициализации приложения.
Только инстансы и константы могут быть инжектированы.
Доступен корневой скоуп приложения - $rootScope

Provider - factory, который позволяет выполнить кастомную конфигурацию на сonfig этапе
Live Demo

Слайд 24//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){}]);

Injector - Иньекция зависимостей

Слайд 25Стандартные сервисы Angular
$http - ajax запросы (использует промисы)
$location - манипулиции с

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

Слайд 26Роутинг
Angular JS Routing Example

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

модулям/подсистемам

Слайд 28Организация по типу файлов
.\app
\partials - все view приложения
users\edit.tpl.html
admin\dashboard.html
\controllers - все контроллеры

приложения
\users\edit.js
\admin\dashboard.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Задача каждого модуля
Конфигурация внутренних и внешних сервисов
Регистрация роутинга
Регистарция других компонентов
Регистарция пунктов

главного меню
Инциализация модуля

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

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

Article

Скачать презентацию

Похожие презентации

Итеративная модель (базовый курс) 476
Аттестационная работа. Методическая разработка по выполнению проектно-исследовательской работы Наш классный журнал. (2 класс) 241
Курсы по тестированию IT LABS. IT-бизнес в Украине (Урок 1) 270
Елементи функціонального програмування 418
Информация. Кодирование информации 271
Трактиръ: Head-Office. Функциональные возможности 274

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика