Angular CLI создание проекта: основные команды

Сегодня начинаем разбирать весьма новый фреймворк JavaScript — Angular. Для того чтобы не писать кучу лишнего кода самому, чтобы его запустить и не тратя на это время — сначала мы изучим инструмент Angular CLI.

Что такое Angular CLI 

Это инструмент созданный командой Google, который помогает увеличить скорость работы с проектом. Чтобы с ним работать вам придется изучить несколько команд, которые прописываются в командной строке.

У вас наверное созрел вопрос, а что именно он может? С помощью его вы можете:

  • Создание стартового проекта.
  • Создание конфигурационных файлов для деплоймента (deployment — prodaction и development).
  • Сгенерировать файлы для тестирования.
  • Проделать минимизацию приложения.
  • Создавать шаблонные файлы: сервисов (service), компонентов (component), навигационных файлов (route).

Также у него в арсенале имеется Webpack, который пользуется большой популярностью. Он нужен чтобы компилировать и запускать проекты во время разработки.

Как видите это очень мощный инструмент в разработке больших проектов, и на старте проекта.

Установка Angular CLI

Для того чтобы начать необходимо установить:

  1. Node js — серверная часть Javascript.
  2. Npm — менеджер пакетов, без которого мы далеко не уйдем.

Npm подтянется вместе с Node js при его установки.

Он нам нужен из-за большого количества дополнительных библиотек, зависимостей, которые придется устанавливать. Так мы сможем производить установку каждой по отдельности библиотеки, либо сразу все, которые находятся в файле package.json.

package.json — может хранить все зависимости, которые используются для работы с проектом. Также в нем можно найти — имя проекта, версия, скрипты и т.д.

Заходим на сайт — nodejs. Здесь вас ждет две версии Node js — LTS и Current. Выбирайте LTS и устанавливайте ее.

Скачивание файла node js

Теперь давайте установим Angular CLI на ваш ПК. Для этого вам нужно перейти в командною строку. Это можно сделать двумя способами:

  1. Пуск
  2. Выполнить
  3. Ввести cmd

Или второй способ:

  1. Зажать shift на клавиатуре
  2. Нажать правой кнопкой мыши по пустому месту в папке или рабочем столе
  3. В появившимся списке нажать на пункт «Открыть окно команд».

Два данных способа относятся к операционной системе Windows

После открытия командной строки вводим строку ниже. Она представляет собой запрос на скачивание пакета npm:

  • i это укороченная форма слова install (установить).
  • Далее идет название нашего пакета — @angular/cli.
  • -g означает установить данный пакет глобально на весь компьютер. Иначе мы бы установили его только в папку, из которой была вызвана данная команда и смогли использовать функционал только там.

Эта библиотека большая, поэтому вас понадобиться подождать несколько минут для ее установки.

Вот и все работы были сделаны. Теперь можем перейти рассматривать функционал установленного пакета.

Команды Angular CLI

Все команды должны начинаться со слова — ng. Таким образом мы показываем, что именно хотим использовать Angular CLI.

Вот список всех команд, которые вам понадобиться знать:

ng new [name] — сгенерирует проект с данным названием — [name]. Вместе с этим установит необходимые зависимости в директорию node_modules — это может занять несколько минут.

Это будет зависеть от скорости вашего интернета соединения.

Если вы зайдете в данный проект, то увидите такую картину:

Файлы angular cli описание

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

Перейдите на localhost:4200 в браузере и сможете увидеть ваш проект.

ng serve --prod — также запустит Webpack, но уже будет оптимизировать ваш проект. Таким образом можно уменьшить размер проекта от одной до нескольких сотен килобайт. В нашем случае на ~ 130 кб.

ng build — собирает все ваши файлы проекта и переносит их в папку dist. Далее вы можете делать с ними все что угодно — например, залить куда-нибудь на хостинг.

При ng serve мы ни как не можем пощупать собранные файлы.

ng build --prod — оптимизирует файлы, больше ничем не отличается.

ng generate [spec_file] [name] — создает [spec_file] с названием [name] и автоматически добавляет(производит import) его в модуль.

generate = g

[spec_file] — это левая колонка таблицы

Файл Запрос
Component ng g component name
Service ng g service name
Module ng g module name
Pipe ng g pipe name
Class ng g class name
Guard ng g guard name
Interface ng g interface name
Enum ng g enum name
Directive ng g directive name
Routing module ng g module name --routing

Со всем этими файлами вы познакомитесь позже.

Замена стилизации в проектах

Автоматически Angular CLI генерирует стили с типом .css, но его можно поменять на другие более удобные для вас. Например:

  • Sass
  • Scss
  • Less
  • Styl

Таким образом у нас есть еще один бонус при использовании Angular CLI. Чтобы изменить стилизацию добавьте такой флаг — --style=[name]:

Вместо [name]используйте имена выше.

Также поменяется styles.css на styles.scss и в файле angular.json поменяется на:

Использование встроенных шаблонов

По другому это означает использование html шаблона внутри app.component.ts. Сделать это просто нужно лишь добавить дополнительный флаг при инициализации проекта — --inline-template:

templateUrl поменяется на template.

Выглядеть это будет так:

Использование встроенных стилей

Допустим, если вам понадобиться использовать стили в в app.component.ts, то это можно сделать с помощью такого флага — --inline-style. Таким образом мы поменяем:

На:

Итого

В этом уроке вы познакомились с неотъемлемой частью Angular проектов — Angular CLI. Ко всем приведенным командам вы привыкните когда будете практиковаться с реальными проектами.

При его использовании вы сможете сэкономить несколько минут на каждом созданным проекте. Минусов у него нет, а плюсов даже не счесть.  Удачи!


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *