Angular 17: создание нового компонента с использованием примера команд

Angular 17 — мощная платформа для создания веб-приложений. В этом руководстве вы узнаете, как создать новый компонент с помощью команды Angular CLI и настроить его в соответствии со своими потребностями.

Создать новое приложение:

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

ng new firstApp

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

ng g c favorite

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

Теперь он генерирует новый компонент в приложении angular 17. Вы можете увидеть затронутые изменения в следующих файлах:

приложение/фаворит/фаворит.компонент.html

Вы можете написать HTML-код:

<h1>This is simple creating component Example - ItSolutionStuff.com</h1>
   
<p>favorite works!</p>

приложение/фаворит/фаворит.компонент.css

Вы можете написать CSS-код:

p{ color:red }

приложение/фаворит/фаворит.компонент.тс

Вы можете написать код Core Logic:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
  
@Component({
  selector: 'app-favorite',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './favorite.component.html',
  styleUrl: './favorite.component.css'
})
export class FavoriteComponent {
  
}

Ок, теперь вы можете понять, что и в каких файлах нужно писать.

Вы также можете увидеть, что они автоматически добавили FavoriteComponent в часть импорта файла app.comComponent.ts. как показано ниже:

приложение/app.comComponent.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { FavoriteComponent } from './favorite/favorite.component';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FavoriteComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'first-app';
}

Теперь вы можете использовать FavoriteComponent в файле представления, как показано ниже:

приложение/app.comComponent.html

<app-favorite></app-favorite>

Запустите приложение Angular:

Все необходимые шаги выполнены, теперь вам нужно ввести приведенную ниже команду и нажать Enter, чтобы запустить приложение Angular:

ng serve

Теперь перейдите в веб-браузер, введите указанный URL-адрес и просмотрите выходные данные приложения:

http://localhost:4200

вы можете увидеть макет ниже:

Вы также можете создать новый компонент внутри некоторого каталога. Вы можете попробовать следующую команду:

ng g c admin/users

#angular