31
Июл
2019

Angular CLI

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

npm i @angular/cli -g

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

ng new my-app

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

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

ng serve -o

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

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

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.

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

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

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

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

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

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

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

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

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 – поиск осуществляется по всему сайту.

ng doc forRoot --search

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

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

Share

Тебе может это понравится...