Angular

Angular — это фреймворк от компании Google для создания продвинутых бесшовных (одностраничных) веб-приложений — SPA (Single Page Applications) — на языках программирования TypeScript, JavaScript, Dart.

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

Название читается как «Ангуляр» и переводится на русский как «угловой». Фреймворк назвали в честь угловых скобок, которыми обрамляют HTML-теги. 

Чем Angular отличается от AngularJS

Angular — наследник AngularJS, написанного на JavaScript. Несмотря на похожие названия, это разные фреймворки. AngularJS еще называют версией 1.x. Фреймворк существует с 2009 года. Сейчас он находится в режиме long time support. Это значит, что его продолжают поддерживать, но новые возможности во фреймворк уже не добавляют. На AngularJS написано много legacy-кода.

Новая версия — Angular, он же Angular 2.x и далее. Фреймворк написан на TypeScript и несовместим с AngularJS. Его выпустили в 2016 году и с тех пор развивают. У Angular другая архитектура, а писать на нем можно и с TypeScript, и с JavaScript. 

Устройство фреймворка Angular

Компоненты

Компоненты — это большие составные части приложения, не зависящие друг от друга. Например, один компонент — это лента новостей, другой — шапка сайта. Приложение строится из них, как из блоков. Обычно каждый компонент хранится в отдельном файле. Для него можно создать свои HTML-шаблон и CSS-стили. Они могут находиться в том же файле, что и компонент, а могут подключаться отдельно. Создается готовый блок интерфейса со структурой, стилями и определенной логикой поведения.

Модули

Это тоже составные части приложения, но другие. Они управляют компонентами. Если компонент — это область приложения, то модуль отвечает за управление ею. Точка входа в приложение, код для анимации или навигации — это всё модули.

Главный модуль есть в каждом проекте. Дополнительные добавляются по мере необходимости и выполняют конкретные задачи. Они нужны, чтобы не перегружать основной модуль лишней функциональностью и не делать его слишком громоздким.

Формы

Большинство приложений на Angular — form-based, то есть основанные на формах. Форма — это структура, в которую пользователь вводит какие-либо данные, а потом отправляет их на сервер. Блок для написания комментария или для обратной связи — это форма.

Angular делает работу с формами проще: их не приходится писать с нуля. Для них уже созданы шаблоны, которые нужно адаптировать под новую задачу.

Сервисы

Они похожи на компоненты, но более узкоспециализированные. Они могут определяться как на уровне модуля, так и на уровне компонента или приложения. В сервисах реализуется специальная логика. Они подключаются к приложению в качестве обычного класса и используются для хранения глобального состояния приложения. Также используются в качестве поставщика данных.

Директивы

Это составные части приложения, которые меняют структуру или поведение страницы. Компоненты тоже относятся к директивам. Но кроме них существуют еще два вида: структурные директивы и директивы, изменяющие внешний вид или поведение элементов. Они нужны, чтобы применить одно действие ко всем экземплярам одного компонента — например, изменение валюты во всех карточках товара.

Что необходимо для работы с Angular

Node.js

Это платформа для работы с JavaScript и TypeScript. Подробнее о ней можно прочитать в нашей статье. Node.js нужна для установки и запуска Angular.

Npm

Это пакетный менеджер, который позволяет с помощью одной команды скачать нужный пакет данных. С его помощью обычно устанавливают фреймворки и библиотеки. Его пакеты также требуются для нормальной работы Angular. Обычно npm уже включен в Node.js.

TypeScript

Писать на Angular можно и на чистом JavaScript, и на других его вариациях. Но так как TypeScript является основным для фреймворка, должна быть возможность с ним работать.

Преимущества Angular

Обилие возможностей

Angular помогает привязывать компоненты приложения друг к другу, передавать данные, анимировать интерфейсы и пр. Для простых проектов его функциональность может быть избыточной, но для сложных SPA-приложений она незаменима.

Универсальное применение

Фреймворк позволяет создавать не только веб-приложения. С его помощью можно писать код, который может быть адаптирован под другую среду. Например, приложение сможет работать в мобильной или десктопной операционной системе. С помощью Angular можно создать даже приложение для дополненной реальности.

Подробный style guide

Особенность Angular — подробная документация. Она содержит рекомендации к построению и разработке приложений, style guide — гайд по стилю программирования на Angular. Это удобно для разработчиков, которые впервые столкнулись с фреймворком. Единство стиля помогает программистам лучше понимать код друг друга.

Поддержка от Google

Разработчики Angular — сотрудники Google, а поддержка большой корпорации помогает фреймворку развиваться. При этом благодаря свободной лицензии и открытому исходному коду развивать его могут и сторонние разработчики.

Недостатки Angular

Сложность в изучении

Angular считается одним из самых сложных фронтенд-фреймворков. Его может быть нелегко изучить с нуля самостоятельно. Кроме того, для начала работы потребуется знать не только «чистый» JavaScript, но и TypeScript, который на нем основан.

Отсутствие совместимости между старой и новой версиями

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

Как начать работать с Angular

Разработчики рекомендуют начать с установки консольного интерфейса Angular CLI. Его можно скачать и установить с помощью пакетного менеджера npm:

npm install -g @angular/cli

CLI позволяет создавать и настраивать новые проекты, скачивать и устанавливать пакеты для каждого из них, собирать и развертывать приложения. Команды для CLI начинаются со слов ng.

Например, команда «Создать новое приложение» будет выглядеть как:

ng new <имя_приложения>

После этого можно ввести дополнительные флаги. А команда ng serve, выполненная из папки проекта, собирает и запускает приложение для отладки.

Коротко о главном

• Angular — фреймворк от Google для создания SPA-приложений на TypeScript, JavaScript, Dart с открытым исходным кодом.
• AngularJS — предыдущая версия фреймворка, написанная на JavaScript. Отличается от Angular.
• Компоненты — большие составные части приложения, модули — управляющие компоненты, формы — основа для ввода данных, сервисы — узкоспециализированные компоненты, директивы — составные части приложения.
• Для работы с Angular необходимы Node.js, Npm, TypeScript.
• Преимущества Angular: обилие возможностей, универсальное применение, подробный style guide, поддержка от Google.
• Недостатки Angular: сложность в изучении, отсутствие совместимости между старой и новой версиями.
• Начать работу с Angular рекомендуется с установки Angular CLI.