View
708
Download
3
Category
Preview:
Citation preview
Тема
1. Что такое AngularJS?
2. Особенности фреймворка
3. Основные компоненты
4. Пример приложения
2014. AngularJS. Anton Gordiichuk
Angular?
Cтруктурный фреймворк предназначенный для
построения динамических web-приложений.
Позволяет расширить возможности и синтаксис
существующего HTML.
2014. AngularJS. Anton Gordiichuk
Задачи
• расширение возможностей HTML
• создание простой и четкой структуры приложения
• выполнение низкоуровневых задач за Вас
• тесты пользовательских компонентов
• интеграция с другими фреймворками
2014. AngularJS. Anton Gordiichuk
Когда целесообразно
использовать?
• rich-ui приложения
• single-page приложения
• REST-oriented приложения
2014. AngularJS. Anton Gordiichuk
Доступно из коробки
• двухсторонние связывание данных
• внедрение зависимостей (DI)
• более 60 готовых деректив
• более 25 разнообразных сервисов
• фильтры
• утилиты
2014. AngularJS. Anton Gordiichuk
Производительность
Angular создает минимум накладных расходов, и
поэтому в плане производительности находится на
достаточно высоком уровне.
2014. AngularJS. Anton Gordiichuk
Связывание данных
• односторонняя (особенность многих JS MVC
фреймворков)
• двухсторонняя (Angular, Ember, Knockout)
2014. AngularJS. Anton Gordiichuk
Двухстороннее связывание :)
View
Template
Model
continuous updates model
2014. AngularJS. Anton Gordiichuk
Внедрение зависимостей
• оператор new
• ссылка на глобальную переменную
• передача зависимости туда где она нужна
2014. AngularJS. Anton Gordiichuk
DI в AngularJS
Для управления зависимостями в каждом
AngularJS приложении существует свой сервис
локатор - инжектор.
Задача инжектора - управление жизненным циклом
объектов, внедрение зависимостей.
2014. AngularJS. Anton Gordiichuk
Instance cache Instance factory
$injector.get(‘dep’)
check cachecreate new
if no cache
Создание и поиск зависимостей
$injector
2014. AngularJS. Anton Gordiichuk
Где можно использовать
DI?
• в модулях
• в контроллерах
• в фабричных методах (директивы, сервисы,
фильтры)
2014. AngularJS. Anton Gordiichuk
Контроллер?
JavaScript функция с собственной областью
видимости предназначенная для описания бизнес-
логики приложения.
2014. AngularJS. Anton Gordiichuk
Для чего НЕ стоит
использовать
контроллеры?
• манипуляций с DOM
• форматирования ввода-вывода
• передачи состояния другим контроллерам
• управления жизненным циклом других
компонентов
2014. AngularJS. Anton Gordiichuk
Способы ассоциации
контроллера с $scope
• директива ng-controller
• сервис $routeProvider
2014. AngularJS. Anton Gordiichuk
Директива?
Одна с ключевых компонент фреймворка.
Директивы позволяют задавать определенное
поведение элементам к которым они применяются.
2014. AngularJS. Anton Gordiichuk
Способы объявления
директив
• HTML тег
• HTML аттрибут
• HTML комментарий
• HTML класс
2014. AngularJS. Anton Gordiichuk
Сервис?
Взаимозаменяемые компоненты выполняющие
определенные задачи в рамках web-приложения.
• ленивая инициализация
• одиночка
2014. AngularJS. Anton Gordiichuk
Как пользоваться
сервисами?
Очень просто. Передайте сервис как зависимость в
одну из компонент (контроллер, фильтр,
директиву, другой сервис) и система внедрения
зависимостей позаботится об остальном.
2014. AngularJS. Anton Gordiichuk
Сервисы AngularJS
Фреймворк поставляется с набором уже готовых к
использованию сервисов. Например $http (работа с
XmlHttpRequest), $route (маршрутизация) и тд.
2014. AngularJS. Anton Gordiichuk
Шаблон?
Статическая DOM структура состоящая из HTML,
CSS, а также специальных элементов и атрибутов
которые позволяют AngularJS преобразовать
статические страницы в динамическое web-
приложения.
2014. AngularJS. Anton Gordiichuk
В шаблонах можно
использовать
• директивы
• фильтры
• интерполяционный скобки {{ }}
• элементы форм
2014. AngularJS. Anton Gordiichuk
Гордийчук АнтонJava, JavaScript Developer
skype: a.gordiychuk
email: ant.gordiichuk@gmail.com
2014. AngularJS. Anton Gordiichuk
Recommended