В то время как Angular 1.x по-прежнему широко используется, Angular 2 недавно приблизился к своей RC-версии (и, надеюсь, достаточно скоро, к стабильной версии) и уже внедряется различными компаниями.

Это означает, что почти пришло время попрощаться с Angular 1.x.

Хотя переход между двумя версиями не является полной сменой парадигмы, поскольку он переходил от jQuery к Angular, по-прежнему может быть сложно понять новейшие концепции.

Хорошая новость заключается в том, что Angular 2 сокращает количество концепций для изучения и в основном удаляет различные обходные пути и хаки, которые были внутри Angular 1.x.

Короче говоря, Angular 2 проще. Но, если вы привыкли к Angular 1, вам будет к чему привыкнуть. И вот некоторые.

Компоненты

Компоненты, пожалуй, самая важная концепция Angular 2, с которой нам нужно ознакомиться. Они действительно являются независимыми частями приложения, созданными с помощью пользовательских элементов HTML.

API

Создать базовые компоненты легко, нам нужно только определить некоторые основные свойства, такие как:

  • шаблон (или URL-адрес шаблона)
  • селектор
  • стили (необязательно) или URL-адреса стилей
  • зависимости, такие как: провайдеры (или viewProviders), другие компоненты/директивы или каналы (фильтры в Angular 1)

Есть более продвинутые свойства, которые вы, возможно, захотите использовать, и, конечно же, все они являются необязательными:

  • режим инкапсуляции: по умолчанию он установлен как Emulated, но мы также можем изменить его на Native (Shadow DOM) или вообще не использовать его (Нет).
  • обнаружение изменений: иногда нам не нужно постоянно проверять наличие изменений, и поэтому Angular 2 позволяет разработчикам выбирать обнаружение изменений, необходимое для работы.
    По умолчанию компоненты всегда будут проверять наличие изменений, если только вы не выберете onPush в качестве ChangeDetectionStrategy. Это укажет компоненту проверять изменения только при изменении ввода в его дереве. Для более подробного ознакомления вам следует ознакомиться с этой статьей http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html.
  • метаданные animations: Angular 2 полностью изменил принцип работы анимации. Думаю, к лучшему. Подробно узнать об этом можно здесь: https://angular.io/docs/ts/latest/guide/animations.html.
  • …и даже более продвинутые вещи.

Забудьте о $scope, функциях ссылок, ограничениях и даже $compile. Теперь все это часть прошлого.

Жизненный цикл компонента

Хотя это было добавлено в Angular 1.x, Angular 2 представил жизненный цикл для каждого компонента, который вы создаете. Компоненты запускают следующие методы, которые необходимо определить в классе компонента.

  • нгонинит()
  • нгдочекк()
  • нгондестрой()
  • нгончанжес()
  • нгафтервиевинит()
  • ngAfterViewChecked()
  • ngAfterContentInit()
  • ngAfterContentChecked()

А Директивы?

Директивы — это просто компоненты без шаблона. Короче говоря, они используются как атрибуты.

Входы и выходы

Компоненты и провайдеры могут использовать входы и выходы для взаимодействия друг с другом более аккуратным и удобным способом, чем когда-либо прежде.

  • Входные данные определяют параметры, которые можно передать от родительского к дочернему компоненту.
  • Выходы — это Observables, которые компонент может использовать для передачи событий своему родительскому компоненту, который, в свою очередь, может подписаться при отправке событий.

Также можно использовать провайдера для отправки/подписки на события и использовать его во всем нашем приложении.

Трансклюзия, или, лучше, Контент-проекция

Трансклюзия не сильно изменилась, и использовать ее будет очень просто.

Атрибут ng-transclude заменяется элементом ‹ng-content›, который разработчик должен разместить в какой-то части шаблона компонента.

Мультипроекция также поддерживается и очень проста в использовании: с помощью атрибута select мы можем указать, куда должен быть проецирован дочерний компонент. Посмотрите на пример:

«Требуемые» компоненты

Что ж, термин require относится к языку Angular 1.x. Теперь мы должны сказать inject.

Но то, что мы хотим, как правило, одно и то же: программно использовать родительские и дочерние компоненты вместе. К счастью, Angular 2 делает это легче, чем когда-либо прежде.

Внедрение дочерних компонентов

Чтобы потребовать дочерние компоненты, мы можем использовать четыре разных декоратора:

  • ViewChild (дочерний элемент, расположенный в шаблоне компонента)
  • ContentChild (дочерний элемент, расположенный в проекции содержимого компонента)
  • ViewChildren (дочерние элементы, расположенные в шаблоне компонента)
  • ContentChildren (дочерние элементы, расположенные в проекции содержимого компонента)

При использовании ViewChildren и ContentChildren мы получим QueryList‹Component›. QueryList — это своего рода массив, но не полностью. Он использует почти те же методы и может быть легко преобразован в массив с помощью метода toArray().

Вот пример:

Внедрение родительских компонентов

Вместо этого, чтобы внедрить родительский компонент, это еще проще: просто внедрите компонент в конструктор, и вы получите ссылку на родителя в своем компоненте.

Провайдеры

К счастью, одна из самых упрощенных концепций в Angular 2 — это Providers. Итак, больше никаких сервисов и фабрик, по крайней мере, в языке углов. Провайдеры — это простые конструкторы, которые должны выполнять тяжелую работу с компонентами, которым они передаются.

Понимание DI

Поставщики передаются компоненту с помощью свойства providers (массив) его API метаданных.

Провайдеры внедряются как одиночки: если провайдер внедряется в компонент, то он доступен для всех его дочерних элементов как один и тот же экземпляр. Если провайдер снова передается в массив провайдеров дочернего компонента, то создается новый экземпляр. Поначалу это создавало мне немало головной боли, поэтому обратите внимание, как добавление провайдера к метаданным компонента меняет его поведение.

Если вы хотите ограничить область действия поставщика только представлением компонента, вместо этого следует использовать свойство метаданных компонента viewProviders.

Взаимодействие с ДОМ

Короче говоря, jQLite больше нет. И вы можете подождать, если думаете о добавлении jQuery в свое приложение Angular.

Лучшей практикой для вызова методов DOM с Angular 2 является внедрение поставщика Renderer и вызов методов для элементов с его помощью.

RxJS и реактивное программирование

Как и React, Angular 2 включил реактивное программирование и сделал его неотъемлемой частью своего стека. Вероятно, это также самый большой переход разработчиков Angular к новым концепциям функционального реактивного программирования. Кривая обучения немного крутая, и рекомендуется изучать операторы один за другим.

Наблюдаемые

Наиболее важным оператором является Observables, который мы ввели при отображении выходных данных компонентов. Наблюдаемые объекты широко используются в приложениях Angular и особенно важны, поскольку они заменили промисы в клиентских вызовах HTTP.

Государственное управление

Если вы хотите попробовать что-то очень крутое, рекомендую заглянуть на https://github.com/ngrx/store. Он позволяет писать приложения Angular 2, используя инструмент управления состоянием, вдохновленный знаменитым Redux.

Это не требуется для создания приложений Angular 2, но наличие управления состоянием с однонаправленным потоком данных действительно может облегчить вашу жизнь.

Отличное чтение на эту тему непосредственно Виктором Савкиным: https://vsavkin.com/managing-state-in-angular-2-applications-caf78d123d02

Инструменты

В то время как запуск проекта Angular 1.x был делом нескольких секунд, мы не можем сказать то же самое об Angular 2. Да, существует множество шаблонов, но сложность запуска примера приложения значительно увеличилась с появлением использование транспиляторов, типизация, тонны конфигов и необходимых плагинов. Так что да, Front-end Ops требует от вас больше терпения.

Введите веб-пакет

Webpack любят и ненавидят. Любимый, потому что он работает так невероятно хорошо. Ненавидел, потому что, как мы уже говорили, это не самый простой инструмент. Однако вы можете использовать следующие инструменты, чтобы начать и начать любить его немного больше:

  • Webpack Bin — http://www.webpackbin.com: песочница кода для запуска окружения webpack на лету. Мне это очень нравится.
  • Webpack Starter — https://github.com/AngularClass/angular2-webpack-starter: вероятно, лучший (но также сложный) шаблон для Angular 2 с использованием Webpack.
  • Семя Angular 2 — https://github.com/angular/angular2-seed: минимальная установка Webpack и Angular 2.
  • Стартер компонентов Ng2 — https://github.com/Gbuomprisco/ng2-component-starter: сделанный мной очень небольшой шаблон для создания компонентов и их выпуска с помощью NPM. Еще нужно много работы, но большая часть вещей уже сделана за вас.

Существует не только Webpack

Webpack — не единственный инструмент для запуска проектов Angular 2: действительно, вы все еще можете использовать простой ES5, Google Dart или загрузить Typescript с помощью SystemJS.

Почему я не рекомендую делать ничего из этого? Что ж, если команда Angular выбрала Typescript, должна быть причина. Но на самом деле самая важная причина в том, что 90% доступных примеров используют Typescript. И первоначальная кривая обучения окупится в среднесрочной перспективе.

Именование и соглашения

Смело предположим, что это почти все, что вам нужно: https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md

Знаменитое руководство по стилю Джона Папы одобрено командой Angular и внесено многими разработчиками на Github.