От автора: статья сравнивает главные отличия оригинального 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, которая состоит из модели, представления и контроллера.
Контроллер: представляет собой то, как обрабатываются пользовательские взаимодействия и привязываются к модели и представлению.
Представления: слой представления и сам UI.
Модель: абстрактное представление данных.
Некоторые разработчики считают, что AngularJS следует шаблону MVVM, в котором контроллер заменяется на модель представления. Модель представления – это JS функция, аналогичная функции контроллера. Ее особенность в том, что она синхронизирует данные между представлением и моделью. Изменения в UI элементе автоматически приходят в модель и наоборот.
Следующая схема показывает связь различных кусков AngularJS.
С другой стороны, Angular имеет компонентную архитектуру. В каждом приложении Angular, как минимум, 1 компонент (корневой компонент). У каждого компонента есть связанный с ним класс, который обрабатывает бизнес-логику, а также шаблон, который является слоем представления.
Несколько тесно связанных компонентов можно сложить и создать модуль, а каждый модуль самостоятельно формирует функциональную единицу.
Из рисунка сверху видно, что компонент ограничен шаблоном. Компоненты составляются с помощью классов TypeScript, а шаблоны крепятся к ним через аннотации @Component. С помощью подсистемы вставки зависимостей Angular в компонент можно подключать сервисы. Концепция модулей в Angular резко отличается от модулей AngularJS. NgModule – это контейнер для определения функциональной единицы. NgModule может состоять из компонентов, сервисов и других функций. Модульную единицу затем можно импортировать и использовать с другими модулями.
Шаблоны в AngularJS и Angular 2
В AngularJS шаблоны пишутся на HTML. Для динамичности можно добавить AngularJS код, например, атрибуты, разметка, фильтры и элементы формы. Кроме того, поддерживается двусторонняя привязка данных, о которой говорилось ранее. Код ниже демонстрирует использование директив и двойных фигурных скобок внутри шаблона:
<html ng-app> <!-- Body tag augmented with ngController directive --> <body ng-controller="MyController"> <inpu#t ng-model="foo" value="bar"> <!-- Button tag with ngClick directive --> <!-- Curly bracket is a template binding syntax --> button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"></script> </body>
</html>
В Angular структура шаблонов от AngularJS была переработана, в шаблоны было добавлено много новых функций. Главное отличие было в том, что у каждого компонента был прикрепленный к нему шаблон. Все HTML элементы кроме html, body, base и script работают внутри шаблона. Помимо этого есть функции типа привязки шаблонов, интерполяции шаблонов, шаблонных утверждений, привязки свойств, привязки событий и двусторонней привязки. В шаблон также входят встроенные директивы атрибутов NgClass, NgStyle и NgModel, а также встроенные структурные директивы NgIf, NgForOf, NgSwitch.
Вставка зависимостей в AngularJS и Angular 2
Вставка зависимостей – это шаблон проектирования, который решает зависимости и вставляет их в компоненты, когда они необходимы. Это позволяет не забивать зависимости статично в компонент. AngularJS обладает подсистемой вставки, которая создает компоненты, вставляет зависимости и резолвит список всех зависимостей. Следующие компоненты можно вставить по желанию:
value
factory
service
provider
constant
Сервисы, директивы и фильтры можно вставить с помощью метода factory. Пример метода factory. Метод factory регистрируется с модулем myModule:
angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) { // ...
}])
.directive('directiveName', ['depService', function(depService) { // ...
}])
.filter('filterName', ['depService', function(depService) { // ...
}]);
Подход остался тем же, но в Angular система вставки зависимостей обновлена и отличается от старого шаблона DI. Вставка зависимостей Angular управляется массивом @NgModule, который состоит из providers и declarations. Массив declarations – это пространство объявления компонентов и директив. Зависимости и сервисы регистрируются в массиве providers.
Представьте, у вас есть сервис ContactlistService, вытягивающий список контактов и предоставляющий его в компонент ContactList. ContactlistService сперва необходимо зарегистрировать в app.module.ts в массиве providers. Далее нужно вставить сервис в компонент:
import { Component } from '@angular/core';
import { Contact } from './contact';
import { ContactListService } from './contactlist.service'; @Component({ selector: 'app-contacts-list', template: ` <div *ngFor="let contact of contacts"> {{contact.id}} - {{contact.name}} - {{contact.number}} </div> `
})
export class ContactListComponent { contacts: Contact[]; constructor(contactlistService: ContactlistService) { this.contacts = contactlistService.getcontacts(); }
}
Мы говорим 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, чтобы вы могли вставлять любую связанную зависимость в компонент:
@Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
Поддержка инструментов для 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.