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

Что такое Angular CLI?

Angular CLI - официальный инструмент для инициализации и работы с проектами Angular. Это избавляет вас от хлопот, связанных со сложной конфигурацией и инструментами сборки, такими как TypeScript, Webpack и т. Д.

После установки Angular CLI вам нужно будет запустить одну команду для создания проекта, а другую - для его обслуживания с помощью локального сервера разработки для игры с вашим приложением.

Как и большинство современных интерфейсных инструментов, Angular CLI построен на основе Node.js.

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

После того, как вы создадите свое приложение для производства, вам не понадобится Node.js, потому что окончательные пакеты представляют собой просто статические HTML, CSS и JavaScript, которые могут обслуживаться любым сервером или CDN.

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

Ознакомьтесь со стеком MEAN - это архитектура, включающая MongoDB, Express (веб-сервер и инфраструктура REST API, построенная на основе Node.js) и Angular. Вы можете прочитать эту статью, если хотите получить пошаговое руководство для начала работы.

В этом случае Node.js используется для создания серверной части вашего приложения и может быть заменен любой серверной технологией, такой как PHP, Ruby или Python. Но Angular не зависит от Node.js, за исключением его инструмента CLI и установки пакетов из npm.

NPM расшифровывается как Node Package Manager. Это реестр для размещения пакетов Node. В последние годы он также использовался для публикации клиентских пакетов и библиотек, таких как Angular, React, Vue.js и даже Bootstrap.

Примечание: вы можете бесплатно загрузить нашу Книгу Angular: создавайте свои первые веб-приложения с помощью Angular.

Установка Angular CLI

Во-первых, на вашем компьютере для разработки должны быть установлены Node и npm. Есть много способов сделать это, например:

  • использование NVM (Node Version Manager) для установки и работы с несколькими версиями узла в вашей системе
  • используя официальный менеджер пакетов вашей операционной системы
  • установка с официального сайта.

Давайте сделаем это просто и воспользуемся официальным сайтом. Просто посетите страницу загрузки и скачайте двоичные файлы для Windows, а затем следуйте указаниям мастера установки.

Вы можете убедиться, что Node установлен в вашей системе, выполнив следующую команду в командной строке, которая должна отобразить установленную версию Node:

$ node -v

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

$ npm install @angular/cli

На момент написания этой статьи будет установлен Angular 8.3.

Если вы хотите установить Angular 9, просто добавьте тег next следующим образом:

$ npm install @angular/cli@next

После успешного завершения команды у вас должен быть установлен Angular CLI.

Краткое руководство по Angular CLI

После установки Angular CLI вы можете запускать множество команд. Начнем с проверки версии установленного CLI:

$ ng version

Вторая команда, которую вам может потребоваться выполнить, - это команда help для получения полной справки по использованию:

$ ng help

Интерфейс командной строки предоставляет следующие команды:

add: Добавляет поддержку внешней библиотеки в ваш проект.

build (b): компилирует приложение Angular в выходной каталог с именем dist/ по заданному выходному пути. Должен выполняться из каталога рабочей области.

config: извлекает или устанавливает значения конфигурации Angular.

doc (d): открывает официальную документацию Angular (angular.io) в браузере и выполняет поиск по заданному ключевому слову.

e2e (e): создает и обслуживает приложение Angular, а затем выполняет сквозные тесты с помощью Protractor.

generate (g): Создает и / или изменяет файлы на основе схемы.

help: список доступных команд и их краткое описание.

lint (l): запускает инструменты линтинга для кода приложения Angular в заданной папке проекта.

new (n): Создает новое рабочее пространство и исходное приложение Angular.

run: запускает настраиваемую цель, определенную в вашем проекте.

serve (s): Создает и обслуживает ваше приложение, восстанавливая его при изменении файлов.

test (t): запускает модульные тесты в проекте.

update: обновляет ваше приложение и его зависимости. См. Https://update.angular.io/

version (v): выводит версию Angular CLI.

xi18n: извлекает сообщения i18n из исходного кода.

Создание проекта

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

$ ng new frontend

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

Как упоминалось ранее, интерфейс командной строки спросит вас: Хотите добавить маршрутизацию Angular?, и вы сможете ответить, введя y (Да) или n (Нет), что является параметром по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите нужные параметры и нажмите Enter, чтобы продолжить.

После этого у вас будет ваш проект, созданный со структурой каталогов и набором конфигураций и файлов кода. В основном это будут форматы TypeScript и JSON. Давайте посмотрим на роль каждого файла:

  • /e2e/: содержит сквозные (имитирующие поведение пользователя) тесты веб-сайта.
  • /node_modules/: Все сторонние библиотеки устанавливаются в эту папку с использованием npm install
  • /src/: содержит исходный код приложения. Большая часть работы будет сделана здесь
  • /app/: содержит модули и компоненты
  • /assets/: содержит статические ресурсы, такие как изображения, значки и стили.
  • /environments/: содержит файлы конфигурации для конкретной среды (производство и разработка)
  • browserslist: требуется автопрефиксу для поддержки CSS
  • favicon.ico: значок
  • index.html: основной файл HTML
  • karma.conf.js: файл конфигурации для Karma (инструмент тестирования)
  • main.ts: основной начальный файл, из которого загружается AppModule.
  • polyfills.ts: полифиллы, необходимые для Angular
  • styles.css: файл глобальной таблицы стилей для проекта
  • test.ts: это файл конфигурации для Karma
  • tsconfig.*.json: файлы конфигурации для TypeScript
  • angular.json: содержит конфигурации для CLI
  • package.json: содержит основную информацию о проекте (название, описание и зависимости)
  • README.md: файл уценки, содержащий описание проекта.
  • tsconfig.json: файл конфигурации для TypeScript
  • tslint.json: файл конфигурации для TSlint (инструмент статического анализа)

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

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

Сначала перейдите в папку своего проекта и выполните следующие команды:

$ cd frontend
$ ng serve

Теперь вы можете перейти к адресу http: // localhost: 4200 /, чтобы начать играть с вашим клиентским приложением. Страница будет автоматически перезагружена, если вы измените какой-либо исходный файл.

Генерация угловых артефактов

Angular CLI предоставляет команду ng generate, которая помогает разработчикам создавать базовые артефакты Angular, такие как модули, компоненты, директивы, каналы и службы:

$ ng generate component my-component

my-component - это имя компонента. Angular CLI автоматически добавит ссылки на components, directives и pipes в файл src/app.module.ts.

Если вы хотите добавить свой компонент, директиву или канал в другой модуль (отличный от основного модуля приложения, app.module.ts), вы можете просто добавить перед именем компонента имя модуля и косую черту:

$ ng g component my-module/my-component

my-module - имя существующего модуля.

Заключение

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

Мы также видели различные команды, которые вы можете использовать на протяжении всего процесса разработки проекта для создания артефактов Angular, таких как модули, компоненты и службы.

Вы можете связаться с автором или подписаться на него через его личный сайт, Twitter, LinkedIn и Github.