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

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

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

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

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

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

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

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

npm i @angular/cli -g

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

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

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

• ng new [name] — сгенерирует проект с данным названием — [name]. Вместе с этим установит необходимые зависимости в директорию node_modules — это может занять несколько минут.
• ng serve — запускает Webpack, который в свою очередь собирает файлы вашего проекта и переносит их в оперативную память вашего компьютера. Если вы замените какой-то файл, то он заново будет пересобирать ваш проект. Перейдите на localhost:4200 в браузере и сможете увидеть ваш проект.
• ng serve –prod — также запустит Webpack, но уже будет оптимизировать ваш проект. Таким образом можно уменьшить размер проекта от одной до нескольких сотен килобайт. В нашем случае на ~ 130 кб.
• ng build — собирает все ваши файлы проекта и переносит их в папку dist. Далее вы можете делать с ними все что угодно — например, залить куда-нибудь на хостинг.
• ng build –prod — оптимизирует файлы, больше ничем не отличается.
• ng generate [spec_file] [name] — создает [spec_file] с названием [name] и автоматически добавляет(производит import) его в модуль.
• [spec_file] — это левая колонка таблицы

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

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

• Sass
• Scss
• Less
• Styl

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

ng new my-project --style=scss

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

"styles": [
  "src/styles.css"
],

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

ng new [name] --inline-template

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

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `  
    <div style="text-align:center">
     <!-- Еще какой-то код -->
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <!-- Еще какой-то код -->
    </ul>
 
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Единственный способ использовать CLI для автоматического импорта его в другой модуль-указать

ng g component moduleName/newComponent

где модуль-это модуль, вы уже определено в вашем проекте. Если moduleName не существует, он поместит компонент в каталог moduleName/newComponent, но все равно импортирует его в приложение.модуль