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

results matching ""

    No results matching ""