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 код, например, атрибуты, разметка, фильтры и элементы формы. Кроме того, поддерживается двусторонняя привязка данных, о которой говорилось ранее. Код ниже демонстрирует использование директив и двойных фигурных скобок внутри шаблона:

<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

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

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

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

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.

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

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

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

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

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree