Даже если вы прятались под камнем, вы должны знать, что AngularJS 2 идет (или уже здесь, в зависимости от того, с кем вы разговариваете!). Тем не менее, многие люди были обеспокоены радикальными изменениями, которые AngularJS 2 предлагает по сравнению с AngularJS 1, до такой степени, что на первый взгляд они могут показаться двумя совершенно разными фреймворками. Но если вы на самом деле потратите некоторое время на это, вы поймете, что AngularJS 2 на самом деле

  1. Использует те же концепции, которые предложил и реализовал AngularJS 1.
  2. Многое упрощает, чтобы упростить разработку на AngularJS.

В этой статье мы рассмотрим некоторые из основных причин, по которым AngularJS 2 на самом деле проще начать, чем AngularJS 1.

Прощай, 40+ директив, было приятно узнать тебя!

Помните, когда вы впервые начали изучать AngularJS2, вам внезапно пришлось изучить все эти специальные директивы, от ng-click до ng-show, ng-class и т. Д. Каждое действие, которое мы хотели выполнить, переводилось бы в директиву, и если бы мы хотели поддержать новое поведение, это означало бы написание или интеграцию с новой директивой. Это было необходимо, потому что AngularJS 1 был оболочкой для jQuery и DOM и, следовательно, нуждался в выходе для каждого API.

Не так с AngularJS 2. Большинство элементов DOM связываются напрямую с новым синтаксисом привязки данных и событий. Это означает, что мы можем напрямую привязывать значения к стилям, innerHTML, а также к собственным событиям, таким как щелчок, наведение курсора и т. Д. Нет необходимости в новых библиотеках, новых интеграциях.

Теперь мы можем попрощаться с

  • нг-шоу / нг-скрыть
  • нг-щелчок
  • ng-mouseover
  • ng-keypress
  • нг-стиль
  • нг-класс

И еще много директив. В AngularJS 2 жизнь намного проще!

Больше никаких услуг, фабрик, поставщиков, объектов определения директив

Самый популярный вопрос о StackOverflow, связанный с AngularJS, звучал так: В чем разница между Сервисом, Заводом и Поставщиком?. И печально то, что даже после ответа не многие люди понимали это. А потом у нас был ужасный объект определения директивы с областями действия, =, &, @ и другими! И особенно этот включенный элемент, не так уж много людей понимали или использовали его! Означает ли это перенос и включение, или это было что-то более коварное?

Вместо этого в AngularJS 2 нам нужно работать только с классами ES6. Хотите услугу? Напишите класс. Хотите завод? Напишите класс. Нужно создать директиву или компонент? Напишите класс! В лучшем случае вам придется изучить несколько простых аннотаций, но основная функциональность всегда связана с использованием классов. В отличие от AngularJS1, где каждый из них был реализован по-разному (класс для службы, функция для фабрики, объект для директивы), когнитивные накладные расходы минимальны в AngularJS 2, где все является просто классом с разными аннотациями.

HTML, который передает, что происходит - привязка событий и данных

Одна из распространенных жалоб на HTML-шаблоны AngularJS 1 заключалась в том, что с большими проектами они очень запутывались. То есть, учитывая фрагмент HTML, например

<div do-x=”y”>

Не было очевидно, был ли y жестко закодированным строковым литералом, переменной, переданной из области видимости, привязанным к данным или просто прослушивателем кликов, таким как ng-click. Это может означать одностороннюю привязку данных, двустороннюю привязку данных, простой строковый атрибут.

AngularJS2 решает эту проблему, изменяя синтаксис, чтобы сделать намерение более ясным.

Если данные должны быть привязаны из кода JS (контроллеры) к пользовательскому интерфейсу, используйте синтаксис []

<div [innerHtml]=”someValueFromController”>
<myElement [myCustomAttr]=”someValueFromController”>

Если событие должно быть привязано к контроллеру из пользовательского интерфейса, используйте синтаксис ()

<div (click)=”controllerFn()”>

Привязка события работает для любого события DOM без необходимости кода. В AngularJS 2 нет связующего кода, который говорит, что вы можете выполнить привязку () по щелчку! Это лучшая часть, будущие события, добавленные в браузер, будут автоматически доступны в AngularJS 2!

Если у него нет ни одного из них, это стандартный нормальный атрибут HTML!

С помощью этих трех правил понимание любого шаблона становится очень простым как для нас, как для разработчиков, так и для IDE, которые теперь могут предоставить нам отличные функции бесплатно!

Несколько простых концепций для начала

В отличие от AngularJS 1, для которого требовалось как минимум понимать

  • Контроллеры
  • Услуги
  • Синтаксис шаблона
  • Множество директив
  • Области применения
  • Жизненный цикл AngularJS
  • Скомпилировать и связать
  • Объекты определения директивы

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

  • Компоненты
  • Услуги
  • Структурные директивы
  • Привязка данных и событий

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

Вывод

AngularJS 2 - это сейсмическое изменение в AngularJS land, но в то же время оно может быть постепенным и более простым движением. Это также может быть лучшим местом для начала для разработчиков, плохо знакомых с AngularJS, где вместо того, чтобы тратить время на изучение сложного зверя (и какой он красивый зверь!), Они могут начать с чего-то более простого, надежного и производительного. чем AngularJS 1.