Инструмент Create-Angular-Components

Более быстрый способ создания компонентов Angular из шаблонов

Я собираюсь продемонстрировать полезный инструмент, который поможет вам ускорить процесс создания приложений Angular.

При работе с макетами или одностраничными шаблонами, такими как Bootstrap, задача создания каждого отдельного компонента, а затем вырезания и вставки каждого раздела шаблона может стать обременительной. Представьте, что вы используете Angular-cli и для каждого компонента вам нужно выполнить команду ng g component my-new-component плюс вырезать и вставить. Есть способ попроще? Да! Вот тогда-то и вступает в действие инструмент create-angular-components.

Прежде всего

Для этой демонстрации я предполагаю, что у вас уже есть angular-cli и / или установлено приложение Angular. Если нет, выполните следующие шаги.

После того, как ваше приложение будет запущено и запущено, давайте установим инструмент create-angular-components:

npm install -g create-angular-components

Если вы точно выполнили описанные выше шаги, древовидная структура вашего приложения Angular должна быть похожей на мою структуру ниже.

Использование файла шаблона

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

Примечание: я решил назвать его template.html вместо index.html, чтобы не путать файл с таким же именем в папке src. Но вы можете называть это как угодно.

Как видите, он состоит из следующих разделов:

Вышеупомянутые элементы html - это части, которые я хочу преобразовать в компоненты и подкомпоненты.

Настройка

Теперь все, что нам нужно сделать, это пометить элементы html, которые мы хотим преобразовать в компоненты, добавив data-component="ComponentName". Не забывайте: используйте CamelCase!

Запуск команды

После того, как все элементы отмечены атрибутами компонентов данных, пора выполнить команду.

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

cd my-app
cac template.html

… барабанная дробь…

et voilá! Если все работает успешно, вы увидите сообщение о том, что 5 компонентов (3 компонента и 2 подкомпонента) были сгенерированы в /Users/user-name/my-app/src/app.

Глядя на конечный результат вашего дерева папок, вы должны иметь:

Посмотрев на about.component.html, вы должны увидеть все содержание "about" вашего шаблона:

<div class="about">
  <h2> About me </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Это ваш about.component.ts с запущенным кодом, готовым к заполнению:

import { Component } from '@angular/core';
@Component({
  selector: 'about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent {
  constructor(){}
}

Он не только создает папку с именем, указанным в атрибуте компонента данных, включая файл TypeScript, файл css, файл html с вашим контентом, но также и файл модульного теста. Довольно круто, а?

Также ваш файл template.html останется нетронутым. Вы можете удалить его или переделать свои компоненты, когда захотите.

Что ж, на сегодня все. Репо для этой демонстрации можно найти здесь.

Большое спасибо Алексею Охрименко (@aiboy на Github) за создание этого замечательного инструмента, и если вы хотите посетить его страницу на github или увидеть репозиторий, перейдите сюда.