Улучшение генерации файлов Angular

RedDeveloper
04.02.2023 12:52
Улучшение генерации файлов Angular

Файлы Angular

Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.

В результате, типы и организация файлов в некоторой степени предопределены функциональностью. Компоненты, директивы, службы... и т.д. Наличие стандарта означает, что создание файлов в некоторой степени функционально.

Функциональность создания файлов

Это функция, предоставляемая Angular CLI (@angular/cli), которая помогает вам написать код, необходимый для создания определенных типов файлов.

Например, есть код, необходимый для создания файла компонента.

import { Component } from '@angular/core';

@Component({
  selector: 'app-textbox',
  template: '<input type="text"></input>',
  styles: ['input { font-weight: bold; }'],
})
export class TextboxComponent {}

Для простого компонента, который отображает элемент ввода типа text, не нужно писать много кода.

Angular CLI напишет большую часть кода за вас.

# textbox 라는 이름의 컴포넌트 생성
# --inline-template 옵션을 사용하면 html 파일을 따로 생성하지 않는다
# --inline-style 옵션을 사용하면 css 파일을 따로 생성하지 않는다
ng generate component textbox --inline-template --inline-style

# 축약 버전도 있다
ng g c textbox --inline-style --inline-template

Выполнение приведенной выше команды создаст файл, подобный приведенному ниже.

import { Component } from '@angular/core';

@Component({
  selector: 'app-textbox',
  template: '',
  styles: [''],
})
export class TextboxComponent {}

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

Улучшения

Хотя это отличная функция, есть некоторые вещи, которые лично мне показались недостаточно хорошими, поэтому я их улучшил.

1. установка пути создания файла

Существует два способа задать путь создания файла.

  1. Введите его непосредственно как опцию
  2. Выполните команду из этой папки

Лично мне оба варианта показались громоздкими. Было бы неплохо иметь возможность просто запустить команду и выбрать из списка местоположение, которое я хочу создать.

? Ng 모듈
  apps/src/app.module.ts
> apps/src/modules/.../feat.module.ts
  apps/src/modules/.../feat2.module.ts

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

В целом, Angular управляет файлами по модулю , поэтому мы могли бы определить место создания файла, выбрав модуль для создания файла.

Например, добавление файла компонента в модуль feat.module.ts создаст файл в папке feat.module.ts/components.

2. Ввод параметров

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

Я нашел gatsby-cli хороший способ указать опции, поэтому я позаимствовал его. Когда вы запускаете команду, она последовательно предлагает пользователю ввести или выбрать параметр.

? prefix (app) ___

Он принимает текстовый ввод

Или выбор вариантов.

Подведение итогов

Поскольку я работал над улучшением существующей функции, мне приходилось часто обращаться к кодовой базе Angular CLI, и я думаю, что многое почерпнул из нее. Я хотел бы копнуть глубже, когда у меня будет больше времени.

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.