24.04.2023 в 16:16

Основы Angular: все о компоненте Ng Generate

В этой статье мы рассмотрим, как использовать Angular CLI для создания компонентов.

Angular - это фреймворк, который позволяет нам создавать интерактивные веб-интерфейсы для пользователей. Он поставляется с Angular CLI, который позволяет нам легко создавать файлы проекта.

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

Поэтому большинство проектов создаются с помощью Angular CLI, чтобы упростить управление проектом.

В этой статье мы рассмотрим, как использовать Angular CLI для создания компонентов.

Основное использование Ng Generate

Чтобы использовать ng generate для создания файлов компонентов вместе со связанными тестовыми файлами, мы запускаем:

ng generate component

Мы можем сократить это до:

ng g component

Другие файлы проекта, которые мы можем создать с помощью ng generate, включают:

оболочку приложения
приложение
класс
компонент
директиву
enum
guard
перехватчик
интерфейс
библиотеку
модуль
pipe
распознаватель
сервис
service-worker
web-worker

Мы также можем запустить его с несколькими флагами.

Флаг --defaults заставляет ng g запускаться со всеми установленными значениями по умолчанию.

Флаг --dry-run позволяет нам запускать ng g без фактического создания файлов. Скорее, он просто показывает нам, какие изменения будут сделаны, когда мы запустим его без флага.

--force позволяет принудительно перезаписать существующие файлы.

--help показывает нам справочное сообщение для команды, которую мы имеем перед флагом.

--interactive включает интерактивные подсказки ввода.

Все они являются логическими флагами.

Компоненты и параметры Ng Generate

Компоненты - это строительные блоки приложения Angular. Компоненты делят код на более мелкие части. Для создания компонентов мы запускаем ng g с именем компонента. Например, мы запускаем:

ng g component Foo

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

Компонент ng g поставляется со своими собственными параметрами.

Флаг --change-detection позволяет нам установить стратегию обнаружения изменений для компонента.

--display-block позволяет добавить :host { display: block; } в файл, когда мы его создадим.

--export позволяет нам экспортировать компонент. Это логический флаг.

--flat создает новые файлы на верхнем уровне текущего проекта. Это логический флаг.

--inline-style заставляет Angular CLI помещать стили в файл компонента в виде строки, а не в отдельный файл. Это логический флаг.

--inline-template заставляет Angular CLI помещать шаблон в файл компонента в виде строки, а не в отдельный файл. Это также логический флаг.

--module позволяет нам установить модуль для регистрации компонента.

--prefix позволяет нам установить префикс для селектора компонентов.

--project позволяет нам установить проект, в котором должен находиться компонент. Он принимает строковое значение.

--selector позволяет нам установить имя селектора. Он принимает строковое значение.

--skip-import заставляет Angular CLI пропустить импорт компонента в модуль. Это логический флаг.

--skip-selector позволяет пропустить настройку имени селектора генерируемого компонента. Это логический флаг.

--skip-tests позволяет пропустить создание тестовых файлов. Это логический флаг.

--standalone позволяет нам создать автономный компонент. Это логический флаг.

--style позволяет нам установить препроцессор CSS для использования с файлом. Это может быть один из css, scss, sass, less или none.

--type позволяет нам добавить определения типов TypeScript, которые мы хотим, в файл определения типов в проекте. Он принимает строковое значение.

И --view-encapsulation позволяет нам установить стратегию инкапсуляции представления. Это может быть один из Emulated, None или ShadowDom. Инкапсуляция представления позволяет изолировать компонент, чтобы он не влиял на остальную часть приложения.

Использование ng g для создания файлов компонентов

Мы можем использовать ng g component с перечисленными выше параметрами для создания и регистрации нашего собственного компонента.

Например, мы запускаем:

ng g component Foo --inline-style --inline-template --selector FooBar --style scss

создать компонент Foo с селектором FooBar. И у него есть встроенные стили и шаблоны, которые находятся внутри файла компонента.

Препроцессор для компонента — scss. В итоге мы должны увидеть папку foo в папке приложения с файлами foo.component.ts и foo.component.spec.ts.

В foo.component.ts мы видим:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "FooBar",
  template: ` <p>foo works!</p> `,
  styles: [],
})
export class FooComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

Мы видим, что selector — это FooBar, который совпадает с тем, что мы указали с опцией --selector.

template устанавливается в шаблон, который является встроенным.

В foo.component.ts мы видим:

import { ComponentFixture, TestBed } from "@angular/core/testing";

import { FooComponent } from "./foo.component";

describe("FooComponent", () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FooComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(FooComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
});

который генерируется ng g.

У него есть тест, который настраивает компонент для тестирования в обратном вызове beforeEach.

Мы получаем тестируемый компонент из fixture.componentInstance. Затем мы вызываем it с описанием спецификации компонента и обратным вызовом, который проверяет достоверность компонента с помощью toBeTruthy.

В app.module.ts мы видим:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FooComponent } from "./foo/foo.component";

@NgModule({
  declarations: [AppComponent, FooComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Мы видим, что FooComponent импортирован и зарегистрирован в свойстве массива declarations. В результате он готов к включению в другие компоненты AppModule.

В app.component.html заменяем то, что есть на:

<FooBar></FooBar>

чтобы показать содержимое компонента, который мы только что создали.

Таким образом, мы видим, что foo works! отображается на экране, когда мы запускаем ng serve и переходим по адресу http://localhost:4200/.

Поскольку мы указываем флаг --inline-styles при запуске ng g component, мы можем добавлять стили в свойство массива styles компонента.

Например, мы пишем:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "FooBar",
  template: ` <p>foo works!</p> `,
  styles: [
    `
      p {
        color: red;
      }
    `,
  ],
})
export class FooComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

чтобы добавить строку со свойством массива styles.

Теперь элемент p отображается с красным текстом, так как мы установили стиль цвета на красный.

После создания компонента с помощью компонента ng g мы все еще можем изменить его позже.

Например, мы можем создать стили и файлы шаблонов вручную в папке foo, а затем установить свойства templateUrls и stylesUrls в объекте, который мы называем @Component, чтобы указать пути для внешних файлов шаблонов и стилей.

И мы можем избавиться от свойств template и styles, если заменим шаблон и стили внешними файлами.

Заключение

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

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

Источник:

Angular Basics: All About Ng Generate Component

#Angular #Начинающим

241