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

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


===== Что такое   Angular CLI    =====

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

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

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

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

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

===== Установка Angular CLI =====

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

После открытия командной строки вводим строку ниже. Она представляет собой запрос на скачивание пакета npm:
<code powershell>
npm i @angular/cli -g
</code>
  * ''i''  это укороченная форма слова ''install''  (установить).
  * Далее идет название нашего пакета — ''@angular/cli''.
  * ''-g''  означает установить данный пакет глобально на весь компьютер. Иначе мы бы установили его только в папку, из которой была вызвана данная команда и смогли использовать функционал только там.
Вот и все работы были сделаны. Теперь можем перейти рассматривать функционал установленного пакета.


=====   Команды  Angular CLI =====

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

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

<code powershell>
ng new my-project --style=scss
</code>

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

<code json>
"styles": [
  "src/styles.css"
],
</code>

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

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

<code powershell>
ng new [name] --inline-template
</code>

<note>
templateUrl поменяется на template.
</note>

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

<code javascript>
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `  
    &lt;div style="text-align:center"&gt;
     &lt;!-- Еще какой-то код --&gt;
    &lt;/div&gt;
    &lt;h2&gt;Here are some links to help you start: &lt;/h2&gt;
    &lt;ul&gt;
      &lt;!-- Еще какой-то код --&gt;
    &lt;/ul&gt;
    
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}
</code>
=====Создать компонент для конкретного модуля=====

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

<code powershell>
ng g component moduleName/newComponent
</code>

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