Перейти к содержанию

Angular CLI

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

1
npm i @angular/cli -g

Начнем с команды ng new. Она генерирует скелет вашего будущего приложения.

1
ng new my-app

my-app — это название вашего проекта (может быть любым). Angular CLI создаст одноименную директорию и поместит в нее исходные файлы "скелета" для вашего приложения.

По умолчанию в только что сгенерированном проекте имеется только один компонент AppComponent, который содержит приветствующий текст. Для запуска приложения используйте ng serve.

1
ng serve -o

Теперь приложение запущено и доступно по адресу http://localhost:4200 (по умолчанию). Параметр -o указывает, что после сборки приложение должно автоматически открыться в браузере.

Если вам необходим другой порт или у вас статический IP-адрес и вы хотите осуществлять доступ именно по нему, используйте флаги port и host.

1
ng serve -o --port 5000 --host x.x.x.x

Теперь вернемся к ng new и рассмотрим ее основные параметры:

style
задает для проекта расширение файлов CSS (sass, less, css — по умолчанию);
routing
если указан, создается модуль маршрутизации;
inline-style
если указан, все стили вписываются в компонент в строковом виде;
inline-template
если указан, весь HTML-код вписывается в компонент в строковом виде.

С полным перечнем возможных флагов можно ознакомиться здесь.

Другая незаменимая команда Angular CLI — ng generate. Она генерирует "скелет" любой сущности Angular.

1
ng generate component my-app1 --prefix --flat

или более краткая запись

1
ng g component my-app1 --prefix --flat

Если сущность может быть покрыта unit-тестами, для нее дополнительно создается файл *.spec.ts.

Параметр --prefix указывает префикс генерируемых сущностей (по умолчанию app). Если указать его без значения, то префикс будет опущен.

Параметр --flat указывает, что для генерируемой сущности не будет создана директория и все файлы будут помещены в то место, откуда была вызвана команда.

Причем создание осуществляется Angular CLI интеллектуально. Например, при создании компонента он автоматически определяется к модулю приложения (можно жестко указать с помощью флага --module) и прописывается в свойстве declarations.

Чтобы пропустить автоматическое добавление сущности в проект, укажите параметр --skip-import.

1
ng g component my-app1 --prefix --flat --skip-import

Полный список сущностей, которые могут быть созданы с помощью ng generate:

  • class;
  • enum;
  • interface;
  • component;
  • directive;
  • pipe;
  • service;
  • guard;
  • module;
  • application;
  • library;
  • universal.

Более подробно с параметрами для каждой сущности можно ознакомиться в официальной документации Angular CLI.

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

Для многих только начинающих работу с Angular будет полезным использование ng doc. Она ищет вхождения переданного значения в разделе API документации на официальном сайте Angular. Если указан флаг --search — поиск осуществляется по всему сайту.

1
ng doc forRoot --search

Для запуска автоматизированных тестов (unit и e2e) имеются команды ng test и ng e2e соответственно.

Не ограничивайте себя использованием только ng serve и ng generate, старайтесь автоматизировать любой ручной труд и вы сэкономите много времени.

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

Ссылки

Комментарии