Angular 17 é uma estrutura poderosa para construção de aplicações web. Neste tutorial, você aprenderá como gerar um novo componente usando o comando Angular CLI e personalizá-lo de acordo com suas necessidades.
Criar novo aplicativo:
Se quiser testar do zero como gerar componentes no aplicativo angular, você pode executar o seguinte comando para baixar o novo aplicativo:
ng new firstApp
Agora nesse aplicativo, você pode gerar um novo componente usando o seguinte comando:
ng g c favorite
Agora você pode ver que ele irá gerar novos arquivos conforme a captura de tela abaixo:
Agora ele gera um novo componente no aplicativo angular 17. Você pode ver afetado nos seguintes arquivos:
app/favorite/favorite.component.html
Você pode escrever código HTML:
<h1>This is simple creating component Example - ItSolutionStuff.com</h1>
<p>favorite works!</p>
app/favorite/favorite.component.css
Você pode escrever código CSS:
p{ color:red }
app/favorite/favorite.component.ts
Você pode escrever o código 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 {
}
Ok, agora você pode entender o que deve escrever em quais arquivos.
Você também pode ver que eles adicionaram automaticamente FavoriteComponent na parte de importação do arquivo app.component.ts. como abaixo:
app/app.component.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';
}
Agora você pode usar FavoriteComponent em seu arquivo de visualização conforme abaixo:
app/app.component.html
<app-favorite></app-favorite>
Execute o aplicativo Angular:
Todas as etapas necessárias foram executadas, agora você deve digitar o comando abaixo e pressionar Enter para executar o aplicativo Angular:
ng serve
Agora, vá para o seu navegador, digite o URL fornecido e veja a saída do aplicativo:
http://localhost:4200
você pode ver o layout abaixo:
Você também pode gerar um novo componente dentro de algum diretório. Você pode tentar o comando abaixo:
ng g c admin/users