Когда я говорю кому-то, что занимаюсь Angular, один из первых вопросов, который я обычно задаю, - «Какой Angular? 1, 2, 4 или 6? » Являясь одним из самых популярных фреймворков JavaScript, развитие Angular шло не так, как обычно, и по этой причине многие люди путают, имеет ли Angular разные версии одного и того же фреймворка или каждая из версий является другим фреймворком. Фактически, в развитии Angular был один фреймворк ngTransform, в то время как другие были просто обновленными версиями того же фреймворка. Итак, чтобы быть ясным, у нас есть фреймворк, который мы называем Angular 1 или AngularJS, и его последняя и последняя версия - 1.7, и на самом деле он никогда не достигнет Angular 2. С другой стороны, у нас есть Angular, который представляет собой совершенно новый фреймворк с запуском версия 2.0 и которая постоянно получает свои обновленные версии, такие как 4.0, 5.0, 6.0, и к тому моменту, когда вы читаете эту статью, скорее всего, будет 7.0 и, возможно, более поздние версии (Рис. 1).

Итак, у нас есть два разных фреймворка, и вам может быть интересно, что чувствует разработчик AngularJS, переходящий на новый Angular. На первый взгляд, код Angular кажется странным, и он выглядит совершенно иначе, чем его потомок. Но копнув глубже, вы можете найти много общего, которое просто обернуто другим синтаксисом, и понимание этих сходств и различий поможет упростить ngTransform и насладиться новым и мощным Angular даже больше, чем AngularJS.

Одной из основных концепций обоих фреймворков, которая отвечает за определение всего или части приложения, являются модули Angular. В AngularJS для создания модуля мы используем метод angular.module (), где мы его называем, а затем используем в HTML как корневой модуль. Таким же методом мы также установим все внешние зависимости. В новом Angular эти модули называются ngModules, они импортируются из ядра Angular и используются в качестве декоратора для класса. Внутри этого декоратора мы импортируем все необходимые внешние зависимости. В отличие от AngularJS, в новом Angular вы определяете корневой модуль в том же файле, что и экспортируемый класс (рис. 2). Помимо импорта списка других модулей, мы используем свойство объявления для перечисления компонентов (мы рассмотрим это более подробно ниже), которые будут использоваться в нашем модуле, а также мы определяем свойство начальной загрузки, чтобы сообщить Angular о корневом компоненте, который является вставляется в основной HTML и запускает модуль приложения.

В AngularJS у нас были контроллеры, ответственные за управление потоком данных в нашем приложении. Мы определяем их с помощью метода angular.controller () и подключаем его функцию драйвера, которая фактически будет динамически управлять соответствующим HTML-кодом. В новом Angular вместо контроллеров есть компоненты, которые на самом деле являются экспортируемыми классами (как почти все в Angular) со своим собственным декоратором @Component, где мы определяем селектор - идентификатор компонента в коде HTML и шаблон - код шаблона html для Компонент, который будет вставлен в тег селектора (рис. 3). Компоненты Angular можно использовать везде в приложении, где наш компонент объявлен в соответствующем модуле.

Как в AngularJS, так и в Angular есть встроенные директивы в коде HTML, и в целом они очень похожи друг на друга с небольшими отличиями. В AngularJS все встроенные директивы имели формат «ng-directive», в то время как в новом Angular каждый тип директивы имел свой собственный формат записи. Например, для обозначения любой директивы, которая может привести к структурному изменению в HTML-коде, используется формат «* ngDirective». Мы рассмотрим различные типы встроенных директив Angular в следующем абзаце, когда углубимся в привязки данных.

Еще одна важная спецификация Angular - привязка данных. Таким образом, DOM взаимодействует с контроллером / компонентом. Существует 4 типа привязки данных (рис. 4).

Первый - Интерполяция - это когда мы вставляем любую переменную из контроллера / компонента в {{двойные фигурные скобки}} и привязываем ее к DOM (рис. 5).

Один из способов связывания похож на Interpolation в том, что его использование в новом Angular намного мощнее. При односторонней привязке мы можем привязать любое допустимое свойство HTML к переменной, используя [квадратные скобки] (рис. 6).

Когда у нас есть взаимодействие с пользователем, может возникнуть необходимость получить данные о взаимодействии из DOM и отправить их нашему контроллеру / компоненту. Для этого мы используем привязку событий, а в AngularJS у нас были встроенные директивы, такие как ng-click, ng-blur, ng-focus, ng-keyup и т. Д. Что круто в новом Angular, так это то, что вместо встроенного -in мы используем существующие события в HTML-элементах и ​​просто заключаем их в (круглые скобки), и вместо упомянутых директив у нас будет (щелчок), (размытие), (фокус), (нажатие клавиши) и т. д. (рис.7) .

И последняя и самая мощная опция привязки данных - это двусторонняя привязка, при которой данными можно управлять как из DOM, так и из контроллера / компонента. Мы используем директиву ng-model в AngularJS. В новом Angular мы получили встроенную вспомогательную директиву [(ngModel)] (рис. 8).

Как видите, у нас есть немного сложный формат для директивы двусторонней привязки данных, но на самом деле за ней стоит логика. Сначала у нас есть [квадратные скобки], как если бы мы имели одностороннюю привязку свойств, поэтому таким образом мы получаем значение свойства от контроллера / компонента. С другой стороны, мы можем изменить данные из DOM, как в случае привязки событий, где мы использовали (круглые скобки). Поэтому для двусторонней привязки данных мы заключили этот формат (круглые скобки) в [квадратные скобки].

Итак, подводя итоги из предыдущего абзаца, мы можем признать, что Angular отказался от многих встроенных директив, ранее использовавшихся в AngularJS, поскольку большинство из них были заменены существующими свойствами HTML, а события, соответственно, заключены в [квадратные скобки] и (круглые скобки) (рис. 9).

Следующая основная концепция Angular - это службы, которые представляют повторно используемую логику во всем приложении. Если в AngularJS у нас было несколько типов сервисов, таких как «Фабрики», «Сервисы сами по себе», «Провайдеры», «Константы» и «Значения», то в новом Angular у нас есть только классы (рис. 10).

Итак, определив класс и написав в нем логику, мы можем сделать его представителем любого из вышеупомянутых типов сервисов из AngularJS. В AngularJS в определении модуля нам нужно определить метод service () (или factory (), provider () и т. Д.), Чтобы создать службу или что-то еще, связав ее с соответствующей функцией. В Angular мы просто определяем класс и экспортируем его (только не забудьте добавить Service как суффикс имени класса по соглашению) (рис. 11).

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

И наконец, что не менее важно, ключевой спецификацией Angular является внедрение зависимостей. Вот как мы внедряем сервисы в разные контроллеры / компоненты нашего приложения. Но перед инъекцией надо было их как-то зарегистрировать. В AngularJS мы регистрировали сервис вместе с определением соответствующими методами (рис. 12).

В новом Angular мы просто используем поставщиков свойств внутри нашего декоратора @ngModule, где мы фактически регистрируем наши службы. После регистрации службы мы можем внедрить ее в контроллер / компонент (рис. 13).

Кстати, как я уже упоминал в начале, AngularJS уже получил свое последнее обновление и будет поддерживаться до 2021 года, в то время как Angular продолжает получать обновления и становится все лучше и лучше от версии к версии, включая новые инструменты и функции, упрощающие разработку на Angular, быстрее и радостнее. Один из моих любимых инструментов, представленных в версии 6.0, - это Angular CLI - интерфейс командной строки для Angular, который делает установку приложений и создание компонентов доступными с помощью простых командных строк. Еще один любимый инструмент - Angular Material Starter Components - библиотека компонентов материального дизайна, на основе которых вы можете создавать свои собственные детализированные и конкретные компоненты проекта.

На самом деле, применение Typescript и функций из ES2015 + при использовании AngularJS действительно может сделать его менее отличным от нового Angular. Более того, поскольку в AngularJS v1.5 были представлены компоненты, которые представляют собой особый вид директив AngularJS с гораздо более простыми конфигурациями, делающими их подходящими для приложений на основе компонентов. И если вы использовали его в AngularJS, вам, скорее всего, будет легче понять компоненты в новом Angular. Итак, чем больше вы привыкли к более поздним функциям AngularJS и функциям Typescript или ES2015 +, тем проще будет ваш ngTransform с AngularJS на Angular.

Если вы хотите получить больше информации о новых Angular Docs, Angular CLI и Angular Material, ознакомьтесь с этими источниками:

Чтобы представить вам эту инфографику, я прослушал этот курс по Angular от Джона Папы.

Об авторе:

Хачатур Товмасян - JavaScript-джедай, страстно увлекающийся веб-технологиями, йогой и медитацией.

Первоначально опубликовано на medium.com 20 августа 2018 г.