Ciklum Java Saturday - November 22, 2014

1. advanced HTML for
web apps!

2. Тема
1. Что такое AngularJS?
2. Особенности фреймворка
3. Основные компоненты
4. Пример приложения
2014. AngularJS. Anton Gordiichuk

3. Что такое AngularJS?
2014. AngularJS. Anton Gordiichuk

4. Angular?
Cтруктурный фреймворк предназначенный для
построения динамических web-приложений.
Позволяет расширить возможности и синтаксис
существующего HTML.
2014. AngularJS. Anton Gordiichuk

5. Почему <Angular>?
Angular <> ng
2014. AngularJS. Anton Gordiichuk

6. Задачи
• расширение возможностей HTML
• создание простой и четкой структуры приложения
• выполнение низкоуровневых задач за Вас
• тесты пользовательских компонентов
• интеграция с другими фреймворками
2014. AngularJS. Anton Gordiichuk

7. Когда целесообразно
использовать?
• rich-ui приложения
• single-page приложения
• REST-oriented приложения
2014. AngularJS. Anton Gordiichuk

8. НЕ целесообразно
использовать
• web-игры
• редакторы интерфейсов
2014. AngularJS. Anton Gordiichuk

9. Доступно из коробки
• двухсторонние связывание данных
• внедрение зависимостей (DI)
• более 60 готовых деректив
• более 25 разнообразных сервисов
• фильтры
• утилиты
2014. AngularJS. Anton Gordiichuk

10. Производительность
Angular создает минимум накладных расходов, и
поэтому в плане производительности находится на
достаточно высоком уровне.
2014. AngularJS. Anton Gordiichuk

12. Особенности фреймворка
2014. AngularJS. Anton Gordiichuk

13. Связывание данных
• односторонняя (особенность многих JS MVC
фреймворков)
• двухсторонняя (Angular, Ember, Knockout)
2014. AngularJS. Anton Gordiichuk

14. Одностороннее связывание ;(
View
one-time
merge
Template Model
2014. AngularJS. Anton Gordiichuk

15. Двухстороннее связывание :)
Template
View
continuous updates model
Model
2014. AngularJS. Anton Gordiichuk

16. Внедрение зависимостей
• оператор new
• ссылка на глобальную переменную
• передача зависимости туда где она нужна
2014. AngularJS. Anton Gordiichuk

17. DI в AngularJS
Для управления зависимостями в каждом
AngularJS приложении существует свой сервис
локатор - инжектор.
Задача инжектора - управление жизненным циклом
объектов, внедрение зависимостей.
2014. AngularJS. Anton Gordiichuk

18. Создание и поиск зависимостей
Instance cache Instance factory
$injector.get(‘dep’)
check cache
create new
if no cache
$injector
2014. AngularJS. Anton Gordiichuk

19. Где можно использовать
DI?
• в модулях
• в контроллерах
• в фабричных методах (директивы, сервисы,
фильтры)
2014. AngularJS. Anton Gordiichuk

20. Основные компоненты
2014. AngularJS. Anton Gordiichuk

21. Контроллер?
JavaScript функция с собственной областью
видимости предназначенная для описания бизнес-
логики приложения.
2014. AngularJS. Anton Gordiichuk

22. 2014. AngularJS. Anton Gordiichuk

23. Для чего НЕ стоит
использовать
контроллеры?
• манипуляций с DOM
• форматирования ввода-вывода
• передачи состояния другим контроллерам
• управления жизненным циклом других
компонентов
2014. AngularJS. Anton Gordiichuk

24. Способы ассоциации
контроллера с $scope
• директива ng-controller
• сервис $routeProvider
2014. AngularJS. Anton Gordiichuk

25. ng-controller
2014. AngularJS. Anton Gordiichuk

26. $routeProvider
2014. AngularJS. Anton Gordiichuk

27. Директива?
Одна с ключевых компонент фреймворка.
Директивы позволяют задавать определенное
поведение элементам к которым они применяются.
2014. AngularJS. Anton Gordiichuk

28. Способы объявления
директив
• HTML тег
• HTML аттрибут
• HTML комментарий
• HTML класс
2014. AngularJS. Anton Gordiichuk

29. Директива (сокращенная форма)
2014. AngularJS. Anton Gordiichuk

30. Директива (полная форма)
2014. AngularJS. Anton Gordiichuk

31. Сервисы
2014. AngularJS. Anton Gordiichuk

32. Сервис?
Взаимозаменяемые компоненты выполняющие
определенные задачи в рамках web-приложения.
• ленивая инициализация
• одиночка
2014. AngularJS. Anton Gordiichuk

33. Как пользоваться
сервисами?
Очень просто. Передайте сервис как зависимость в
одну из компонент (контроллер, фильтр,
директиву, другой сервис) и система внедрения
зависимостей позаботится об остальном.
2014. AngularJS. Anton Gordiichuk

34. 2014. AngularJS. Anton Gordiichuk

35. Сервисы AngularJS
Фреймворк поставляется с набором уже готовых к
использованию сервисов. Например $http (работа с
XmlHttpRequest), $route (маршрутизация) и тд.
2014. AngularJS. Anton Gordiichuk

36. Пример сервиса
2014. AngularJS. Anton Gordiichuk

37. Шаблон?
Статическая DOM структура состоящая из HTML,
CSS, а также специальных элементов и атрибутов
которые позволяют AngularJS преобразовать
статические страницы в динамическое web-
приложения.
2014. AngularJS. Anton Gordiichuk

38. В шаблонах можно
использовать
• директивы
• фильтры
• интерполяционный скобки {{ }}
• элементы форм
2014. AngularJS. Anton Gordiichuk

39. Пример шаблона
2014. AngularJS. Anton Gordiichuk

40. Пример приложения
2014. AngularJS. Anton Gordiichuk

41. Ваши вопросы
2014. AngularJS. Anton Gordiichuk

42. Гордийчук Антон
Java, JavaScript Developer
skype: a.gordiychuk
email: ant.gordiichuk@gmail.com
2014. AngularJS. Anton Gordiichuk