1.
2015

2.
Angular 2:
что грядёт
Березин Артём
artem@emply.ru

3.
Зачем вообще
нужна новая
версия

4.
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году

5.
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents

6.
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM

7.
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM
Module → ES6 Module

8.
Низкая производительность
Angular2 в 5 раз шустрее
Тест на построение дерева глубокой вложенности

9.
Сложные концепции
AngularJS 1 содержит много разных
концепций
Сервисы
Провайдеры
Фабрики
Scope
Контроллеры
Модули
Директивы
etc...

10.
Сложные концепции
Это усложняет обучение и понимание

11.
B итоге
Недостатки AngularJs 1
Устаревшие принципы
Низкая производительность
Сложные концепции, крутая кривая изучения

12.
Angular 2
TypeScript
Компоненты
Инициализация приложения
Синтаксис шаблонов
Проверка изменений в моделях

13.
Простое приложение

14.
TypeScript – надмножество JavaScript

15.
TypeScript – надмножество JavaScript
Компилируется в ES5/ES6
Не зависит от Angular 2
Типизированный, но типы
указывать не обязательно
TypeScript 1.5

16.
TypeScript – надмножество JavaScript

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

18.
Компоненты: Аннотации

19.
Компоненты: Контроллер

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

21.
Инициализация: AngularJs 1

22.
Инициализация: AngularJs 1
1)Создать модуль
2)Прописать ng-app в шаблоне
3)Создать контроллер controller
4)Присвоить значения полям $scope
5)Зарегистрировть контроллер
6)Создать шаблон

23.
Инициализация: AngularJs 2
Создать компонент
Инициализировать его

24.
Инициализация: AngularJs 2
1)Создать компонент
2)Создать шаблон
3)Инициализировать (корневой компонент)
4)Транслировать TypeScript в JS (ES5)

25.
Синтаксис шаблонов

26.
Синтаксис шаблонов

27.
Синтаксис шаблонов
Локальные переменные

28.
Синтаксис шаблонов
Обработчики событий

29.
Синтаксис шаблонов
Изменение свойств DOM-элементов

30.
Синтаксис шаблонов

31.
Синтаксис шаблонов
Унификация
#varName — для локальных переменных
(eventName) — для событий
[property] — для полей DOM-элементов

32.
Проверка изменений в моделях
Zone.js
Использует нативный Object.observe()
Рендерит только те компоненты, что изменились
Организовывает асинхронный код в виде задач (зон)
Позволяет отлавливать исключения внутри таких зон.
Позволяет отказаться от $digest ($apply): больше не нужно
вручную вызывать scope.$apply() или заворачивать код в
$timeout

33.
Спасибо за
внимание.
Вопросы?
Основано на: https://angular2-intro.firebaseapp.com/