Первый митап по AngularJS под эгидой GDG Bishkek

1. AngularJS 1.5 – Что нового?
20 Марта 2016г., Бишкек

2. Что будем смотреть?
• Пару слов о фреймворке
• Компоненты
• Байндинги
• Шаблоны
• NgTransclude
• Компонентный маршрутизатор

3. Структурный фреймворк предназначенный для построения
динамических web-приложений. Позволяет расширить
возможности и синтаксис существующего HTML.

4. Google Trends

5. http://chyngyz.github.io/super-heroic-angular/

6. Версия 1.5.х
• 1.5.0 – 5 Февраля (ennoblement-facilitation - облагораживающее
облегчение )
• 1.5.1 – 17 Марта (equivocal-sophistication - неясная изысканность)
• 1.5.2 – 19 Марта (differential-recovery - характерный возврат )

7. Компоненты

8. Директивы
Компоненты

9. Когда использовать компоненты
• Легкая конфигурация
• Оптимизирован под компонентно-ориентированные
архитектуры
• Легкость при переходе на Angular 2

10. Когда НЕ использовать компоненты
• ДОМ манипуляции, обработчики событий
• Если нужно использовать priority, terminal, multi-element
• Должен вызываться как CSS класс или атрибут

11. Directive Component
bindings No Yes (binds to controller)
bindToController Yes (default: false) No (use bindings instead)
compile function Yes No
controller Yes Yes (default function() {})
controllerAs Yes (default: false) Yes (default: $ctrl)
link functions Yes No
multiElement Yes No
priority Yes No
require Yes Yes
restrict Yes No (restricted to elements
only)
scope Yes (default: false) No (scope is always isolate)
template Yes Yes, injectable
templateNamespace Yes No
templateUrl Yes Yes, injectable
terminal Yes No
transclude Yes (default: false) Yes (default: false)

12. Пример
директивы

13. Меняем в компонент

14. Добавляем байндинги

15. Директива Компонент

17. Демка M1

18. Компонентно-ориентированные
приложения

19. Компонентно-ориентированные
приложения

20. Особенности архитектуры
• Компоненты контролируют только свои ВЬЮШКУ и ДАННЫЕ
• Компоненты имеют свои точки ВХОДА и ВЫХОДА данных (Inputs
and Outputs)
• Приложение как дерево из компонентов

21. Демка M2

22. Stateless компоненты

23. Компоненты как шаблоны маршрутизации

24. $resolve и $resolveAs

25. $onInit

26. Межкомпонентная
коммуникация

27. Да все классно!

28. Демка M3

29. Дата байндинги
@ = & <

30. Байндинги
• @ - Одноразовая связка данных
• = - Двух стороннее связывание данных
• & - Передача функции
• < - Одно стороннее связывание данных

31. Пример

32. Двух стороннее связывание данных
Root Родитель
Родитель
Дочерние
Дочерние
Поток данных сверху
вниз и наоборот

33. Одно стороннее связывание данных
Root Родитель
Родитель
Дочерние
Дочерние
Поток данных сверху
вниз

34. Не запутались?

35. Демка M4

36. Шаблоны

37. Компоненты

38. Директивы

39. NgTransclude

40. Директивы
Transclude по умолчанию

41. Компоненты
Transclude по умолчанию

42. Multislot Transclusion

43. Multislot Transclusion

44. Демка M5

45. Класс???

46. Component Router

48. Компонентное дерево

49. Компонентный путь

50. ng-outlet == ng-view

51. Root Router

52. Как это все работает?

53. Как это все работает?

55. Демка M6

56. Спасибо!
Вопросы?
https://github.com/Chyngyz/angular1.5-meetup
@_chngz
arystanuulu@gmail.com