Angular Meetup - Bishkek, March 27th

Angular Meetup under GDG Bishkek,
"Angular 1.5 - What's new?"

Transcript

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