Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"

advanced HTML for

web apps!

Тема

1. Что такое AngularJS?

2. Особенности фреймворка

3. Основные компоненты

4. Пример приложения

2014. AngularJS. Anton Gordiichuk

Что такое AngularJS?


Angular?

Cтруктурный фреймворк предназначенный для

построения динамических web-приложений.

Позволяет расширить возможности и синтаксис

существующего HTML.


Почему <Angular>?

ngAngular <>


Задачи

• расширение возможностей HTML

• создание простой и четкой структуры приложения

• выполнение низкоуровневых задач за Вас

• тесты пользовательских компонентов

• интеграция с другими фреймворками


Когда целесообразно

использовать?

• rich-ui приложения

• single-page приложения

• REST-oriented приложения


НЕ целесообразно

использовать

• web-игры

• редакторы интерфейсов


Доступно из коробки

• двухсторонние связывание данных

• внедрение зависимостей (DI)

• более 60 готовых деректив

• более 25 разнообразных сервисов

• фильтры

• утилиты


Производительность

Angular создает минимум накладных расходов, и

поэтому в плане производительности находится на

достаточно высоком уровне.


Особенности фреймворка


Связывание данных

• односторонняя (особенность многих JS MVC

фреймворков)

• двухсторонняя (Angular, Ember, Knockout)


View

one-time

merge

Template Model

Одностороннее связывание ;(


Двухстороннее связывание :)

View

Template

Model

continuous updates model


Внедрение зависимостей

• оператор new

• ссылка на глобальную переменную

• передача зависимости туда где она нужна


DI в AngularJS

Для управления зависимостями в каждом

AngularJS приложении существует свой сервис

локатор - инжектор.

Задача инжектора - управление жизненным циклом

объектов, внедрение зависимостей.


Instance cache Instance factory

$injector.get(‘dep’)

check cachecreate new

if no cache

Создание и поиск зависимостей

$injector


Где можно использовать

DI?

• в модулях

• в контроллерах

• в фабричных методах (директивы, сервисы,

фильтры)


Основные компоненты


Контроллер?

JavaScript функция с собственной областью

видимости предназначенная для описания бизнес-

логики приложения.



Для чего НЕ стоит


контроллеры?

• манипуляций с DOM

• форматирования ввода-вывода

• передачи состояния другим контроллерам

• управления жизненным циклом других

компонентов


Способы ассоциации

контроллера с $scope

• директива ng-controller

• сервис $routeProvider


ng-controller


$routeProvider


Директива?

Одна с ключевых компонент фреймворка.

Директивы позволяют задавать определенное

поведение элементам к которым они применяются.


Способы объявления

директив

• HTML тег

• HTML аттрибут

• HTML комментарий

• HTML класс


Директива (сокращенная форма)


Директива (полная форма)


Сервисы


Сервис?

Взаимозаменяемые компоненты выполняющие

определенные задачи в рамках web-приложения.

• ленивая инициализация

• одиночка


Как пользоваться

сервисами?

Очень просто. Передайте сервис как зависимость в

одну из компонент (контроллер, фильтр,

директиву, другой сервис) и система внедрения

зависимостей позаботится об остальном.



Сервисы AngularJS

Фреймворк поставляется с набором уже готовых к

использованию сервисов. Например $http (работа с

XmlHttpRequest), $route (маршрутизация) и тд.


Пример сервиса


Шаблон?

Статическая DOM структура состоящая из HTML,

CSS, а также специальных элементов и атрибутов

которые позволяют AngularJS преобразовать

статические страницы в динамическое web-

приложения.


В шаблонах можно


• директивы

• фильтры

• интерполяционный скобки {{ }}

• элементы форм


Пример шаблона


Пример приложения


Ваши вопросы


Гордийчук АнтонJava, JavaScript Developer

skype: a.gordiychuk

email: [email protected]


mailto:[email protected]

Documents

Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"