Создание проектов Angular с помощью Angular CLI

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Создавать новые проекты Angular легко с помощью Angular CLI следующим образом:

$ ng new [name]

Это стандартное использование команды и создание новой папки проекта с [имя]. Проект, созданный в этой папке, содержит:

Проект Angular по умолчанию
Все зависимости установлены в папке node_modules
Файлы тестирования для каждого компонента

Однако использование Angular CLI для создания новых проектов Angular намного эффективнее и не ограничивается выполнением в режиме по умолчанию. Давайте рассмотрим варианты, доступные для ng new, в следующих разделах.

Создание минимального углового приложения

Применяя флаг --minimal к команде ng new, вы можете создать минимальный проект Angular:

$ ng new [name] --minimal

Этот минимальный проект Angular отличается следующим образом от проекта, который создается с помощью команды без каких-либо параметров:

Файлы тестирования не включены
Встроенный код шаблона для компонентов

Запуск веб-сервера разработки с

$ ng serve

даст вам следующий результат:

И вы должны получить следующий вывод, открыв http: // localhost: 4200:

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

В предыдущем примере был создан минимальный проект Angular и использовались встроенные шаблоны. Если вы хотите включить только встроенные шаблоны, а в остальном оставить шаблон проекта по умолчанию, вы также можете использовать флаг --inline-template:

$ ng new [name] --inline-template

Если вы посмотрите на получившуюся структуру проекта, вы не найдете отдельных файлов HTML-шаблонов. Вместо этого код шаблона включается в файл TypeScript компонента, как в app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{title}}!
      </h1>
      <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Использование встроенного стиля

Вы также можете настроить свое приложение Angular со встроенным стилем, используя опцию --inline-style.

$ ng new [name] --inline-style

В результате не создаются отдельные файлы стилей (app.component.css отсутствует в настройке по умолчанию). Вместо того, чтобы указывать на файл стиля в app.component.ts с помощью

styleUrls: ['./app.component.css']

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

styles: []

Выбор варианта стиля

По умолчанию Angular CLI генерирует файл CSS для каждого компонента, добавляемого в проект. Используя опцию --style, вы можете перейти на другие препроцессоры CSS, как показано ниже:

$ ng new [name] --style=scss

В этом случае вместо CSS используется SCSS. Это означает, что файл styles.css переименован в styles.scss, а файл app.component.css переименован в app.component .scss.

Чтобы гарантировать, что используются оба файла, файл styles.scss добавляется в массив, который назначен свойству стилей в .angular-cli.json:

"styles": [
    "styles.scss"
],

Файл app.component.scss включен в реализацию компонента app.component.ts со следующей строкой кода:

styleUrls: ['./app.component.scss']

Возможные значения атрибута --style:

css
scss
меньше
дерзость
стиль

Соответствующее действие сборки препроцессора автоматически добавляется Angular CLI.

Создание модуля маршрутизации

Используя параметр командной строки --routing, мы можем указать, что модуль маршрутизации должен быть добавлен в создаваемое приложение Angular:

$ ng new [name] --routing

При выполнении этой команды был создан дополнительный файл app-routing.module.t s в папке src / app:

Этот файл содержит пустую реализацию модуля маршрутизации Angular по умолчанию. Этот модуль также добавлен в AppModule, поэтому вы можете напрямую добавить конфигурацию маршрута в свойство routes.

Для этого давайте сначала добавим в приложение новый компонент, выполнив:

$ ng generate component second

Это создает следующие новые файлы:

Поскольку этот новый компонент доступен, мы не можем добавить новый маршрут в app-routing.module.ts:

import { SecondComponent } from './second/second.component';
const routes: Routes = [
  { path: 'second', component: SecondComponent }
];

Теперь вы можете получить доступ к URL-адресу http: // localhost: 4200 / second, и вы увидите, что вывод второго компонента выводится прямо под содержимым по умолчанию:

Вывод SecondComponent вставляется сюда, потому что это место, где

<router-outlet></router-outlet>

был вставлен в файл app.component.html.

Измените префикс компонента

По умолчанию для всех префиксов селектора компонентов установлено значение app. Это можно изменить с помощью атрибута --prefix следующим образом:

$ ng new [name] --prefix=myapp

В этом примере установлен префикс myapp.

Пропустить инициализацию репозитория Git / Пропустить первую фиксацию Git

По умолчанию репозиторий Git создается в каталоге проекта Angular. Вы можете пропустить этот шаг, используя параметр --skip-git следующим образом:

$ ng new [name] --skip-git

Если вы хотите создать репозиторий Git для вновь созданного проекта Angular, но хотите пропустить только начальную фиксацию, вы также можете использовать вместо этого флаг --skip-commit.

Заключение

Создать новый проект Angular с помощью Angular CLI очень просто! Однако в большинстве случаев команда ng new используется в режиме по умолчанию. Поскольку Angular CLI - действительно мощный инструмент, доступно больше опций, позволяющих указать, каким образом должен быть сгенерирован проект. В этом посте вы узнали о наиболее важных параметрах командной строки, которые помогут вам создавать новые проекты с Angular CLI, которые точно соответствуют вашим потребностям.

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Лучшие рекомендации онлайн-курсов

# 1 Angular 5 - Полное руководство

Осваивайте Angular (Angular 2+, включая Angular 5) и создавайте потрясающие, реактивные веб-приложения с преемником Angular.js
Go To Course…

№2 Angular 5 и Firebase - создание веб-приложения с помощью Typescript

Узнайте, как создать веб-приложение с использованием Angular, Firebase и Typescript
Перейти к курсу…

Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!

Создание проектов Angular с помощью Angular CLI