Кратко про Angular CLI: для чего нужен, как применять

Angular CLI — мощный инструмент, упрощающий создание производительных JS-приложений. В этом небольшом руководстве для новичков попробуем разобраться для чего он нужен и как с ним работать.

Содержание:
1. Немного об Angular
2. Что такое Angular CLI?
3. Установка интерфейса командной строки
4. Hello Angular!
5. Архитектура Angular CLI
6. Как работает Angular CLI?
7. Чем отличается Angular CLI от AngularJS

1. Немного об Angular

Angular — фреймворк JavaScript, помогающий разработчикам создавать веб-приложения. Технически его можно использовать где угодно, но лучше всего он работает в нестандартных приложениях с данными, там, где нужна комплексная маршрутизация и анимация. Также на его основе создано множество игр и приложений с дополненной реальностью.

2. Что такое Angular CLI?

Angular CLI (cli – command-line interface) — это официальный интерфейс командной строки используемый в экосистеме Angular. Его цель — упростить создание высококачественных приложений. Проще говоря, это набор утилит для быстрого создания новых проектов, обновления существующего кода, добавления сторонних библиотек.

Начать работу с ним просто. Но для начала его нужно его установить.

3. Установка интерфейса командной строки

Для того, чтобы использовать CLI на вашем компьютере, должна быть установлена ​​последняя активная LTS-версия Node.js. Если у вас ее нет, скачать можно здесь.

Если вы работаете в среде Linux или MacOS, я рекомендую взглянуть на Node Version Manager (NVM) — инструмент, позволяющий легко переключаться между разными версиями Node.js на одном компьютере.

Чтобы проверить вашу локальную установку Node.js, запустите node -v в окне терминала и убедитесь, что отображаемая версия выше 10.9.

Установка

Node.js поставляется с npm — менеджером пакетов Node, который мы будем использовать для установки CLI на нашу машину. Для этого откройте окно терминала и выполните следующую команду:

npm install -g @angular/cli

После успешной установки, он будет доступен вам в виде исполняемого файла (ng) в командной строке.

Чтобы убедиться, что вы правильно установили CLI, выполните в терминале следующую команду:

ng version

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

4. Hello Angular!

Чтобы создать новый проект Angular, мы используем команду ng new:

ng new my-app

Вместе с проектом устанавливаются все зависимости, необходимые для разработки под Angular.

Теперь при помощи команды сd вы можете войти в каталог нашего приложения my-app и запустить созданный проект в браузере, выполнив следующую команду:

ng serve

Откройте localhost:4200 в своем любимом браузере, вы должны увидеть что-то вроде этого:

Поздравляю! Вы успешно разработали свое первое приложение Angular. Это все, что нужно для начала работы с Angular CLI.

Но в реальной жизни все гораздо сложнее, чем это тестовое приложение. Прежде чем переходить к реальным проектам, необходимо изучить наиболее распространенные команды по работе с CLI. Чтобы посмотреть, что из себя представляет каждая из них — введите флажок --help.

Это выведет описание каждой отдельной команды и аргументы, которые она принимает, также отобразит поддерживаемые параметры:

ng new --help

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

5. Архитектура Angular CLI

Чтобы понять архитектуру Angular, выясним два основных набора задач, которые он решает.

Набор задач 1

Начинаем ли мы с нуля и вручную создаем все необходимые файлы всякий раз, когда хотим начать новый проект, либо копипастим из существующего проекта? А может, обычно клонируем репозиторий, а затем удаляем ненужный код? В обоих случаях не обойтись без:

ng new

В полнофункциональном приложении Angular задействовано множество концепций: модули, компоненты, сервисы, директивы и пр. Чтобы сгенерировать весь необходимый код нужно прописать:

ng generate

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

ng add

Frontend развивается очень быстро и Angular тоже. Чтобы своевременно добавлять последние фичи и следить за обновлением системы, воспользуйтесь командой:

ng update

Все приведенные выше команды (ng new, ng generate, ng add, ng update) имеют нечто общее — они преобразуют кодовую базу: либо путем создания нового кода, либо путем изменения уже существующего. Эти команды называются командами схемы.

Набор задач 2

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

CLI любезно предоставляет нам для этих целей две команды:

ng test # for unit tests
ng e2e # for end-to-end tests

Чтобы все разработчики в проекте следовали стандартам кодирования, предварительно настройте линтинг (анализ проблемных мест исходного кода):

ng lint

При разработке приложения нам не обязательно развертывать его на рабочем сервере каждый раз — это контрпродуктивно. Вместо этого лучше запустить наш код локально в браузере и мгновенно увидеть изменения:

ng serve

Мы пишем наши приложения Angular на TypeScript, но браузеры понимают только JavaScript. Поэтому код должен быть транслирован в JS и объединен в формат, понятный браузеру. Также позаботимся о размерах приложения. Для этого нам нужно немного встряхнуть наш код — оптимизировать и минимизировать:

ng build

Хотите легко развернуть свои приложения Angular на нужной вам платформе хостинга? CLI и тут поможет вам с помощью команды:

ng deploy

Все приведенные выше команды применяются в процессе разработки (ng serve, ng test, ng e2e, ng lint), сборки и развертывания (ng build, ng deploy). Называются они — Architect Commands.

6. Как работает Angular CLI?

Теперь, когда мы понимаем архитектуру Angular CLI, мы можем сосредоточиться на других не менее важных командах, для чего создадим новый Angular-проект с помощью Routing и Sass.

На этот раз мы включим маршрутизацию и применим препроцессор CSS.

ng new --routing --style=scss ultimate-app

Такая конструкция предлагает CLI использовать Sass, но вы можете выбрать less и stylus, все на ваше усмотрение. А еще выше мы настраиваем маршрутизацию.

--routing эквивалентно --routing=true. Точно так же вы можете использовать --no-routing для --routing=false. Все подобные параметры, принимающие логические значения, ведут себя одинаково.

Основные параметры ng new:

• --routing: настраивать маршрутизацию или нет.
• --style: формат таблицы стилей при использовании препроцессора CSS.
• --prefix: префикс, используемый для селекторов компонентов и директив. По умолчанию это app.
• --create-application: здесь указываем, создавать начальное приложение Angular или нет. Установите для этого флага значение false, если вы планируете создавать несколько приложений Angular в одном репозитории.
• --minimal: создать минимальный проект без настройки модульного тестирования или для e2e-тестирования.
• --collection: используете эту опцию, чтобы подключить другой набор схем для генерации кода.

Обслуживание вашего приложения Angular

Начинаем с команды:

ng serve --open

Команда ng serve включит веб-сервер, запускающий ваше приложение в режиме разработки. Внутри CLI используется функционал Webpack и Webpack Dev Server для компиляции вашего кода, с функцией перезагрузки в реальном времени. Это означает, что если вы измените какой-либо исходный файл, ваше Angular-приложение автоматически перезагрузится в браузере.

С флагом --open CLI автоматически откроет localhost:4200 в вашем браузере после завершения компиляции — это значение по умолчанию. Но иногда вам может понадобиться запустить ваше приложение на другом порту. Для этого вы используете такую ​​опцию:

ng serve --port=4300

Основные параметры ng serve:

• --open: нужно ли автоматически открывать приложение в браузере.
• --port: на каком порту обслуживать ваше приложение.
• --proxy-config: это самая важная опция serve и одна из наименее известных функций Angular CLI, которая позволяет настроить прокси для бэкэнда и перенаправить определенные HTTP-вызовы на другой порт (или другой сервер). Например, вы можете перенаправить все вызовы с localhost:4200/api на localhost:8080/api. Узнайте об этом более детально здесь.
• --ssl: разрешение обслуживать приложение по протоколу HTTPS.

Генерация шаблонного кода

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

Для этого вы используете команду ng generate и передаете ей схему, которую хотите использовать для генерации кода. Схемы существует практически для каждой концепции Angular (сервисы, директивы, каналы и т. д):

ng generate <schematic>

Давайте посмотрим на эти команды в действии! Генерация загруженного модуля:

ng generate module team --route=teams --module=app

Модули играют решающую роль в приложении Angular. Официальное руководство по стилю рекомендует создавать один модуль для каждого связанного функционального блока, а интерфейс командной строки упрощает это.

Приведенная выше конструкция:

1. создает модуль Angular с именем TeamModule.
2. настраивает загрузку TeamModule внутри основного модуля маршрутизации — AppRoutingModule, связывая маршрут /teams с TeamModule.
3. объявляет компонент TeamComponent внутри TeamModule и связывает его с маршрутом /teams.

Создание компонента:

1. ng generate component team/components/team-list --module=team --export
   создаем компонент TeamListComponent внутри team/components каталога.
2. объявим TeamModule.
3. добавим его в массив exports, чтобы сделать доступным для любого импортирующего модуля TeamModule.

Создание службы:

ng generate service team/services/team

• Создаем службу, вызываемую TeamService внутри каталога team/services.
• Линтинг и тестирование вашего приложения:

ng lint, ng test, ng e2e

• Команда test запустит все наши модульные тесты в режиме просмотра.
• Запустите тесты e2e с помощью Protractor:

ng lint --fix

• Эта команда будет анализировать наш код, а благодаря флагу --fix попробует автоматически исправить любые ошибки линтинга.

Построение приложений(ng build)

Чтобы создать наше приложение мы используем команду build, создающую так называемые артефакты сборки (по дефолту в корневой папке).

Иногда простое приложение весит около 15 МБ. Это связано с тем, что по умолчанию CLI создает нашу программу в режиме разработки, то есть без какой-либо оптимизации. Мы можем сказать Angular CLI собрать наше приложение в рабочем режиме, добавив флаг --prod.

ng build —prod

Такая сборка будет хорошо оптимизирована за счет:

• опережающей компиляции (AOT).
• минификации.
• устранения мертвого кода.
• хеширования статических ресурсов для очистки кеша.
• и так далее.

В этом случае размер приложения будет не больше 1 МБ. А это уже намного лучше!

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

В сети можно встретить популярные вопросы новичков о разнице Angular CLI от AngularJS. Поэтому, чтобы расставить все точки, подытожим выше сказанное.

Как мы уже разобрались Angular-CLI — это интерфейс командной строки служащий для работы с приложением, для добавления туда нужного нам функционала и тестирования при помощи определенных команд.

AngularJS — это более старая версия (1.x) фреймворка Аngular, представляющая собой инфраструктуру с открытым исходным кодом для создания веб-приложений на основе JavaScript.

Как видно, это две совсем разные штуки, которые лучше не путать из-за общего слова Angular.

---

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