Angular JS и Angular 2+: детальное сравнение

Angular JS и Angular 2+: детальное сравнение

От автора: статья сравнивает главные отличия оригинального AngularJS от Angular 2+. Если вы застряли с Angular JS проектом и не уверены, стоит ли делать переход, эта статья поможет вам начать. За последние годы мы стали свидетелями невероятного роста Angular как фреймворка и платформы для разработки одностраничных приложений (SPA) и прогрессивных веб-приложений (PWA). AngularJS построен поверх идеи, что декларативное программирование должно использоваться для создания представлений. Это потребовало разделения манипуляций с DOM и бизнес-логики приложения. У такого подхода было много преимуществ.

Однако у AngularJS было много недостатков в плане производительности и того, как все устроено под капотом. Поэтому команда разработки потратила год, переписала код с нуля и выпустила Angular 1 в конце 2016. Большинство разработчиков считали, что Angular 2 отличался от оригинального AngularJS.

Давайте сравним и противопоставим AngularJS и Angular 2+.

Фреймворки в AngularJS и Angular 2

AngularJS следует традиционной архитектуре MVC, которая состоит из модели, представления и контроллера.

Контроллер: представляет собой то, как обрабатываются пользовательские взаимодействия и привязываются к модели и представлению.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Представления: слой представления и сам UI.

Модель: абстрактное представление данных.

Некоторые разработчики считают, что AngularJS следует шаблону MVVM, в котором контроллер заменяется на модель представления. Модель представления – это JS функция, аналогичная функции контроллера. Ее особенность в том, что она синхронизирует данные между представлением и моделью. Изменения в UI элементе автоматически приходят в модель и наоборот.

Следующая схема показывает связь различных кусков AngularJS.

Angular JS и Angular 2+: детальное сравнение

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

Несколько тесно связанных компонентов можно сложить и создать модуль, а каждый модуль самостоятельно формирует функциональную единицу.

Angular JS и Angular 2+: детальное сравнение

Из рисунка сверху видно, что компонент ограничен шаблоном. Компоненты составляются с помощью классов TypeScript, а шаблоны крепятся к ним через аннотации @Component. С помощью подсистемы вставки зависимостей Angular в компонент можно подключать сервисы. Концепция модулей в Angular резко отличается от модулей AngularJS. NgModule – это контейнер для определения функциональной единицы. NgModule может состоять из компонентов, сервисов и других функций. Модульную единицу затем можно импортировать и использовать с другими модулями.

Шаблоны в AngularJS и Angular 2

В AngularJS шаблоны пишутся на HTML. Для динамичности можно добавить AngularJS код, например, атрибуты, разметка, фильтры и элементы формы. Кроме того, поддерживается двусторонняя привязка данных, о которой говорилось ранее. Код ниже демонстрирует использование директив и двойных фигурных скобок внутри шаблона:

В Angular структура шаблонов от AngularJS была переработана, в шаблоны было добавлено много новых функций. Главное отличие было в том, что у каждого компонента был прикрепленный к нему шаблон. Все HTML элементы кроме html, body, base и script работают внутри шаблона. Помимо этого есть функции типа привязки шаблонов, интерполяции шаблонов, шаблонных утверждений, привязки свойств, привязки событий и двусторонней привязки. В шаблон также входят встроенные директивы атрибутов NgClass, NgStyle и NgModel, а также встроенные структурные директивы NgIf, NgForOf, NgSwitch.

Вставка зависимостей в AngularJS и Angular 2

Вставка зависимостей – это шаблон проектирования, который решает зависимости и вставляет их в компоненты, когда они необходимы. Это позволяет не забивать зависимости статично в компонент. AngularJS обладает подсистемой вставки, которая создает компоненты, вставляет зависимости и резолвит список всех зависимостей. Следующие компоненты можно вставить по желанию:

value

factory

service

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

provider

constant

Сервисы, директивы и фильтры можно вставить с помощью метода factory. Пример метода factory. Метод factory регистрируется с модулем myModule:

Подход остался тем же, но в Angular система вставки зависимостей обновлена и отличается от старого шаблона DI. Вставка зависимостей Angular управляется массивом @NgModule, который состоит из providers и declarations. Массив declarations – это пространство объявления компонентов и директив. Зависимости и сервисы регистрируются в массиве providers.

Представьте, у вас есть сервис ContactlistService, вытягивающий список контактов и предоставляющий его в компонент ContactList. ContactlistService сперва необходимо зарегистрировать в app.module.ts в массиве providers. Далее нужно вставить сервис в компонент:

Мы говорим Angular вставить сервис в конструктор компонента.

JavaScript или TypeScript

AngularJS – это чистый JS фреймворк, а модули в AngularJS представляют собой старые, простые JS объекты. Это сильно облегчает процесс создания проекта. Любой разработчик с базовым пониманием JS может начать работу с фреймворком. Благодаря этому, Angular 1.0 очень легко поддается изучению по сравнению с другими фреймворками.

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

Помимо этого TypeScript популярен за свои классы, интерфейсы и декораторы (декораторы классов, декораторы свойств и декораторы параметров). Angular использует классы TypeScript для определения компонентов. @Component – популярный пример того, как декораторы класса используются для прикрепления метаданных в компонент. Обычно это включает в себя детали конфигурации компонентов, такие как тег селектора шаблона, массивы templateUrl и providers, чтобы вы могли вставлять любую связанную зависимость в компонент:

Поддержка инструментов для AngularJS и Angular 2

Хорошая поддержка инструментов помогает разработчикам создавать быстрее и ускоряет общий процесс разработки. Например, интерфейс командной строки (CLI) может сэкономить значительное время на создании приложения с нуля. Есть и другие инструменты, такие как IDE, текстовые редакторы, наборы инструментов для тестирования и т.д. Все они сильно упрощают разработку.

У AngularJS нет официального CLI, но было много сторонних генераторов и инструментов. Среди разработчиков были популярны IDE WebStorm и Aptana. Если вы как я, вы можете настроить нормальный текстовый редактор типа Submlime Text editor и добавить в него правильные плагины. В AngularJS есть расширение ng-inspector для браузера для отладки и тестирования. Структура AngularJS с легкостью позволяла импортировать сторонние модули. Все популярные ng модули можно найти на ngmodules.org, open-source проекте для хранения модулей AngularJS.

По сравнению с AngularJS у Angular поддержка инструментов лучше. Есть официальный CLI, позволяющий инициализировать новые проекты, обслуживать их и строить оптимизированные пакеты на продакшен. Более подробно можете почитать о Angular CLI на GitHub. Вместо JS Angular использует TypeScript, поэтому в качестве IDE поддерживается Visual Studio. Это не все. Есть много плагинов для IDE и независимых инструментов, помогающих автоматизировать и ускорить определенные аспекты цикла разработки. Augury для отладки, NgRev для анализа кода, Codelyzer для валидации кода и т.д. Довольно полезные инструменты.

Заключение

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

В этой статье мы обсудили ТОП-5 различий AngularJS и Angular 2. За исключением структуры шаблонов и вставки зависимостей почти все другие функции были обновлены. Много популярных функций Angular 1.0, таких как контроллеры, область видимости, директивы, определение модулей и т.д. были заменены на другие. Был изменен основной язык и структура.

Автор: Manjunath M

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree