Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2

804 views

Published on

Презентация Артёма Березина на GDG Vladivostok Meetup 04.04.2015

Published in: Software
  • Be the first to comment

Angular2

  1. 1. 2015
  2. 2. Angular 2: что грядёт Березин Артём artem@emply.ru
  3. 3. Зачем вообще нужна новая версия
  4. 4. Устаревшие принципы Код AngularJs 1 основывается на принципах, принятых в 2009 году
  5. 5. Устаревшие принципы Код AngularJs 1 основывается на принципах, принятых в 2009 году Directive → WebComponents
  6. 6. Устаревшие принципы Код AngularJs 1 основывается на принципах, принятых в 2009 году Directive → WebComponents Transclusion → Shadow DOM
  7. 7. Устаревшие принципы Код AngularJs 1 основывается на принципах, принятых в 2009 году Directive → WebComponents Transclusion → Shadow DOM Module → ES6 Module
  8. 8. Низкая производительность Angular2 в 5 раз шустрее Тест на построение дерева глубокой вложенности
  9. 9. Сложные концепции AngularJS 1 содержит много разных концепций Сервисы Провайдеры Фабрики Scope Контроллеры Модули Директивы etc...
  10. 10. Сложные концепции Это усложняет обучение и понимание
  11. 11. B итоге Недостатки AngularJs 1 Устаревшие принципы Низкая производительность Сложные концепции, крутая кривая изучения
  12. 12. Angular 2 TypeScript Компоненты Инициализация приложения Синтаксис шаблонов Проверка изменений в моделях
  13. 13. Простое приложение
  14. 14. TypeScript – надмножество JavaScript
  15. 15. TypeScript – надмножество JavaScript Компилируется в ES5/ES6 Не зависит от Angular 2 Типизированный, но типы указывать не обязательно TypeScript 1.5
  16. 16. TypeScript – надмножество JavaScript
  17. 17. Компоненты
  18. 18. Компоненты: Аннотации
  19. 19. Компоненты: Контроллер
  20. 20. Компоненты
  21. 21. Инициализация: AngularJs 1
  22. 22. Инициализация: AngularJs 1 1)Создать модуль 2)Прописать ng-app в шаблоне 3)Создать контроллер controller 4)Присвоить значения полям $scope 5)Зарегистрировть контроллер 6)Создать шаблон
  23. 23. Инициализация: AngularJs 2 Создать компонент Инициализировать его
  24. 24. Инициализация: AngularJs 2 1)Создать компонент 2)Создать шаблон 3)Инициализировать (корневой компонент) 4)Транслировать TypeScript в JS (ES5)
  25. 25. Синтаксис шаблонов
  26. 26. Синтаксис шаблонов
  27. 27. Синтаксис шаблонов Локальные переменные
  28. 28. Синтаксис шаблонов Обработчики событий
  29. 29. Синтаксис шаблонов Изменение свойств DOM-элементов
  30. 30. Синтаксис шаблонов
  31. 31. Синтаксис шаблонов Унификация #varName — для локальных переменных (eventName) — для событий [property] — для полей DOM-элементов
  32. 32. Проверка изменений в моделях Zone.js Использует нативный Object.observe() Рендерит только те компоненты, что изменились Организовывает асинхронный код в виде задач (зон) Позволяет отлавливать исключения внутри таких зон. Позволяет отказаться от $digest ($apply): больше не нужно вручную вызывать scope.$apply() или заворачивать код в $timeout
  33. 33. Спасибо за внимание. Вопросы? Основано на: https://angular2-intro.firebaseapp.com/

×