Отличие Angular и Angular2

Что нового?

Начнем с того, что Angular2 это совершенно новый фреймворк. Переписан он был чуть больше чем полностью. Оптимизировали скорость работы, добавили typescript из коробки, появилась консольная утилита – Angular CLI, убрали контроллеры, добавили компоненты.

Angular CLI – хрень для генерации проекта. В дополнение к этой поеботе, идут генераторы: компонентов(Component), директив(Directive), и другой херни.

@Component

Компонент создает новые элемент DOM и управляет им.

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) {}
}

import {Component, View} from 'angular2/core'';

@Component({

selector: 'contact-card'

})

@View({

template: `

<div>

</div>

})

class ContactCard {

constructor(public name: string, public city: string) {}

}

<contact-card></contact-card>

1	<contact-card></contact-card>

@Directive

В отличии от компонента, директива цепляется к существующему элементу DOM.

Есть два вида директив: Structural и Attribute. Structural директива – удаляет, добавляет или заменяет структуру DOM. Attribute директива – меняет внешний вид и/или поведение элемента.

import {Directive} from 'angular2/core'';

@Directive({
    selector: "[log-on-click]",
    hostListeners: {
        'click': 'onClick()'
    }
})
class LogOnClick {

    constructor() {}

    onClick() { console.log('Element clicked!'); }
}

import {Directive} from 'angular2/core'';

@Directive({

selector: "[log-on-click]",

hostListeners: {

'click': 'onClick()'

}

})

class LogOnClick {

constructor() {}

onClick() { console.log('Element clicked!'); }

}

<button log-on-click>I log when clicked!</button>

1	<button log-on-click>I log when clicked!</button>

AOT компиляция

В новой версии фреймворка, появилась Ahead-of-time компиляция.

По умолчанию, в angular используется just-in-time (JIT) компиляция. Минус JIT компиляции в том что каждому заходящему пользователю приходится скачивать лишние библиотеки, а это замедляет загрузку приложения. Так же, необходимо компилировать шаблоны и компоненты в исполняемый JavaScript на стороне клиента, что так же замедляет приложение. И если приложение большое, то загружается оно медленно.

Для решения всех этих недостатков, на сцену вышла AOT компиляция, которая компилирует код во время сборки проекта. Удаляются лишние библиотеки. Шаблоны и стили компилируются, инлайнятся. Так же за счет инлайновых шаблонов и стилей убираются лишние запросы, что тоже благоприятно влияет на загрузку.