Angular 2 был выпущен в конце 2016 года и принес Angular в современный Интернет с его настольными и мобильными приложениями. Если вы создаете веб-приложения, скорее всего, вы слышали об Angular, популярной платформе JavaScript для создания полнофункциональных клиентских браузерных приложений. Недавний выпуск Angular 2 (сентябрь 2016 г.) вывел Angular в современный Интернет и расширил его охват до мобильных и настольных приложений.
Так в чем же весь интерес к Angular 2? Чем он отличается от любого другого фреймворка JavaScript? Стоит ли учиться? Что тут любить?
Вот шесть причин полюбить Angular 2
1. Повышенная продуктивность разработчика с Angular 2
Интернет значительно изменился за последние пять лет. В ECMAScript (ES) 2015 у нас есть модули, классы и стрелочные функции. Angular 2 использует эти функции, чтобы сделать свои шаблоны кодирования более последовательными и более простыми для изучения.
Добавьте к этому Typescript - язык, который является надмножеством JavaScript и обеспечивает статическую типизацию и интерфейсы. Используя TypeScript для разработки Angular, мы получаем отличные инструменты, такие как проверка типов, более безопасный рефакторинг и встроенная документация по коду.
Эти функции расширяют возможности разработки и редактирования и помогают нам анализировать, отлаживать и лучше понимать наш код.
2. Согласованные шаблоны кодирования
Одна из лучших вещей, которые фреймворк может сделать для продуктивности разработчика, - это иметь согласованный набор шаблонов кодирования, и Angular именно это и делает. Давайте поговорим о трех из них: классы, встроенная инъекция зависимостей и шаблон MVVM (модель-представление-представление / модель).
Angular 2 использует классы ES и набор аннотаций, называемых декораторами, для создания всех ключевых конструкций Angular. Хотите создать компонент Angular? Создайте класс и добавьте соответствующий декоратор. Хотите создать собственный фильтр трубы? Создайте класс и добавьте соответствующий декоратор. Создаете модуль Angular? Создайте класс и добавьте соответствующий декоратор. Создаете сервис? Что ж, для сервиса мы… создаем класс и добавляем соответствующий декоратор. Вы уловили идею здесь. Angular 2 предоставляет очень последовательный шаблон кодирования для построения частей приложения.
Другой шаблон кодирования, который использует Angular 2, - это мощность внедрения зависимостей (DI). Чтобы использовать любые встроенные службы Angular, такие как HTTP или Router, мы просто внедряем службу в любой класс, которому она нужна. Angular реализует внедрение зависимостей на основе конструктора, поэтому для внедрения службы мы просто передаем ее в качестве аргумента конструктору класса. Вот и все. И когда мы создаем собственные пользовательские сервисы, мы внедряем их, используя ту же технику.
Angular также использует общие архитектурные шаблоны. При создании клиентских приложений головоломка часто состоит из трех частей: пользовательского интерфейса, кода, который поддерживает и управляет этим пользовательским интерфейсом, и модели, содержащей данные для этого интерфейса. Angular 2 четко разделяет эти три части с помощью шаблона модель-вид-вид / модель или MVVM.
Представление определяется в шаблоне, который содержит HTML-код для конкретного компонента. Шаблон может содержать макет страницы, любой части страницы или определять многократно используемый набор элементов пользовательского интерфейса.
Модель определяется как свойства класса компонента. Например, мы определяем свойство героя, которое моделирует супергероя. Мы используем интерфейс для определения деталей этого свойства героя, определения конкретных элементов данных, связанных с этим героем, таких как ее имя, альтер-эго и особые способности.
Представление / модель - это класс, который управляет как представлением, так и моделью. Это код, который вызывает службы для получения данных, реагирует на действия пользователя в представлении, такие как скрытие или отображение элементов, и вызывает службы для сохранения пользовательских записей.
Используя преимущества этих общих шаблонов, Angular 2 делает разработку проще и продуктивнее.
3. Обширная привязка с Angular 2
Многие клиентские веб-приложения работают с данными. Приложение извлекает данные с внутреннего сервера и отображает эти данные в представлении с использованием шаблона. И если пользователь может изменить эти данные, записи пользователя должны быть прочитаны из представления и сохранены обратно на внутренний сервер. Код, необходимый для этого процесса, может быть утомительным и подверженным ошибкам.
Связывание данных Angular 2 упрощает этот процесс. Просто привяжите элементы HTML в шаблоне к свойствам модели в классе, и данные автоматически появятся в представлении. И если пользователь может изменять значения, Angular 2 поддерживает двустороннюю привязку данных. Таким образом, любое изменение, которое пользователь вносит в данные в представлении, автоматически обновляет свойства модели в классе.
Помимо привязки данных, Angular 2 поддерживает привязку свойств. Это позволяет нам управлять объектной моделью документа (DOM) путем привязки свойств HTML к свойствам класса компонентов. Например, мы привязываем свойство HTML hidden элемента изображения к свойству класса компонента, например hideImage. Когда для свойства класса компонента установлено значение true, элемент изображения автоматически скрывается. Когда для свойства класса компонента установлено значение false, автоматически появляется элемент изображения.
И, наконец, Angular 2 поддерживает привязку событий. Это означает, что мы можем реагировать на любое событие из представления, включая события HTML, такие как щелчок, события сторонних компонентов или наши собственные пользовательские события. Мы просто привязываем событие к методу в классе компонента. Когда происходит событие, выполняется метод.
Эти обширные функции привязки упрощают отображение данных, получение пользовательских записей, управление DOM и реакцию на события.
4. Полнофункциональная маршрутизация
Одно представление - это не приложение. Большинство клиентских веб-приложений предоставляют множество представлений для поддержки всех их функций. Может быть представление для страницы приветствия, страницы со списком героев, страницы сведений о герое и страницы редактирования героя. Потом наборы просмотров на злодеев или вакансий. Нам нужно отображать правильный вид в нужное время. Это цель маршрутизации.
Angular 2 обеспечивает полнофункциональную маршрутизацию. С помощью Angular мы определяем маршрут к каждой странице приложения. Затем активируем соответствующий маршрут на основе действий пользователя. Мы можем передавать данные в маршруты, поэтому мы можем указать странице сведений о герое отображать сведения о герое с идентификатором 42.
Мы можем охранять маршруты, чтобы пользователь не мог получить доступ к маршруту без входа в систему или только если он является администратором. Мы можем запретить покидать страницу редактирования, пока пользователь не подтвердит, что хочет сохранить или отменить свои изменения. Мы можем предварительно загрузить данные перед отображением страницы.
Angular 2 поддерживает дочерние маршруты для навигации по определенному маршруту. Например, мы переходим на страницу сведений, а с этой страницы переходим к дочерним маршрутам для страницы технических характеристик или страницы с дополнительной информацией. Это также полезно при отображении вкладок информации на странице.
Мы можем даже отложить загрузку определенных маршрутов, чтобы код маршрута не загружался в браузер и не загружался, пока пользователь не получит доступ к функциям, связанным с этим маршрутом. Так, например, если у нас есть функции администратора, эти функции не загружаются до тех пор, пока пользователь не запросит доступ к функциям администратора.
Вместе эти многочисленные функции делают маршрутизацию Angular 2 очень гибкой и мощной.
5. Минимальный размер и максимальная производительность
Размер и производительность в некоторой степени связаны при работе с веб-приложением. Компонент меньшего размера улучшает производительность запуска как во время загрузки, так и во время компиляции в браузере. Одна из ключевых целей Angular 2 - минимизировать размер и максимизировать производительность.
Минимизировать размер загрузки можно несколькими способами. Во-первых, мы можем сделать размер каждого компонента как можно меньше. Во-вторых, компоненты организованы в модули Angular таким образом, что логические группы можно загружать вместе. И в-третьих, ленивая загрузка маршрутов загружает только модули Angular, необходимые для отображения выбранного пользователем маршрута. Когда пользователь переходит на другие маршруты, загружается необходимый контент, а маршруты, которые пользователь никогда не использует, никогда не загружаются без надобности.
Затем есть компилятор Ahead of Time (AOT). С AoT компилятор запускается один раз во время сборки. Затем браузер загружает предварительно скомпилированную версию приложения и немедленно отображает приложение без необходимости сначала компилировать его в браузере. Кроме того, нет необходимости загружать компилятор Angular, что значительно снижает размер загружаемого приложения.
Angular 2 выполняется быстрее, требует меньше работы и занимает мало памяти.
6. Документация и сообщество
Документация по Angular 2 на angular.io обширна и разнообразна. Он включает в себя краткое руководство по быстрому освоению Angular 2. Оно включает руководство пользователя и справочник по API. Он предоставляет документацию по более продвинутым функциям и кулинарную книгу с рецептами для общих задач, таких как проверка формы и внедрение зависимостей.
Но лучшая часть для изучения Angular 2 - это учебник. Он предоставляет пошаговый опыт создания кода, представляя все основные функции Angular 2. Или, если вы предпочитаете онлайн-класс или обучение в классе, присоединяйтесь к myTectra: Angular 2
Первоначально опубликовано на www.mytectra.com.
