Что нового?
Начнем с того, что Angular2 это совершенно новый фреймворк. Переписан он был чуть больше чем полностью. Оптимизировали скорость работы, добавили typescript из коробки, появилась консольная утилита – Angular CLI, убрали контроллеры, добавили компоненты.
Angular CLI – хрень для генерации проекта. В дополнение к этой поеботе, идут генераторы: компонентов(Component), директив(Directive), и другой херни.
@Component
Компонент создает новые элемент DOM и управляет им.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import {Component, View} from 'angular2/core''; @Component({ selector: 'contact-card' }) @View({ template: ` <div> <h1>{{name}}</h1> <p>{{city}}</p> </div> ` }) class ContactCard { constructor(public name: string, public city: string) {} } |
1 |
<contact-card></contact-card> |
@Directive
В отличии от компонента, директива цепляется к существующему элементу DOM.
Есть два вида директив: Structural и Attribute. Structural директива – удаляет, добавляет или заменяет структуру DOM. Attribute директива – меняет внешний вид и/или поведение элемента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import {Directive} from 'angular2/core''; @Directive({ selector: "[log-on-click]", hostListeners: { 'click': 'onClick()' } }) class LogOnClick { constructor() {} onClick() { console.log('Element clicked!'); } } |
1 |
<button log-on-click>I log when clicked!</button> |
AOT компиляция
В новой версии фреймворка, появилась Ahead-of-time компиляция.
По умолчанию, в angular используется just-in-time (JIT) компиляция. Минус JIT компиляции в том что каждому заходящему пользователю приходится скачивать лишние библиотеки, а это замедляет загрузку приложения. Так же, необходимо компилировать шаблоны и компоненты в исполняемый JavaScript на стороне клиента, что так же замедляет приложение. И если приложение большое, то загружается оно медленно.
Для решения всех этих недостатков, на сцену вышла AOT компиляция, которая компилирует код во время сборки проекта. Удаляются лишние библиотеки. Шаблоны и стили компилируются, инлайнятся. Так же за счет инлайновых шаблонов и стилей убираются лишние запросы, что тоже благоприятно влияет на загрузку.