Angular CLI
Хорошие инструменты делают разработку приложений быстрее и проще, чем если бы вы делали все вручную. Хороший пример такого инструмента это Angular CLI.
Angular CLI - это command line interface. Инструмент, который может создавать проекты, генерировать файлы в соответствии стаил гайдам и выполнять множество текущих задач разработки, таких как: тестирование, сборку, деплоинг.
Подготовка окружения
Для работы Angular CLI необходимы Node.js® and npm. Убедитесь что вы установили нужные версии node 6.9.x и npm 3.x.x. Более старые версии выдают ошибки, но более новые версии работают отлично.
Далее необходимо установить Angular CLI глобально в систему (для этого используем флаг-g).
npm install -g @angular/cli
Создание проекта
Для создания новый проект и скелет приложения, необходимо выполнить следующую команду:
ng new my-app
Данный процесс займет время, так как будут устанавливать необходимые пакеты из npm.
Запуск приложения
После завершения установки можем приступить к запуску нашего проекта. Для этого необходимо перейти в каталог my-app(так мы назвали проект) и выполнить команду для запуска ng serve
.
cd my-app
ng serve
После выполнения этих команд наше приложение будет доступно по адресу http://localhost:4200/.
Команда ng serve
может быть выполнена с указанием различных флагов. Например:
ng serve --open
- запустить локальный сервер и автоматически откроет http://localhost:4200/в браузере
ng serve -host localhost -port 2222
- запустить локальный сервер по адресу http://localhost:4200.
Делать о всех возможных параметрах можно узнать выполнив команду
ng help
Генерация файлов
Angular CLI также помогает нам создавать нужные файлы. Для этого вы можете использовать команду ng generate
(или просто ng g
) для генерации Angular компонентов.
ng generate component my-new-component
ng g component my-new-component
С помощью данной команды вы можете создавать не только компоненты.
Scaffold | Usage |
---|---|
Component | ng g component my-new-component |
Directive | ng g directive my-new-directive |
Pipe | ng g pipe my-new-pipe |
Service | ng g service my-new-service |
Class | ng g class my-new-class |
Guard | ng g guard my-new-guard |
Interface | ng g interface my-new-interface |
Enum | ng g enum my-new-enum |
Module | ng g module my-module |