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