Solucionado
Olá, eu gostaria de entender melhor as ferramentas do Angular Cli, como é o caso do @component, para que ele serve? o que ele faz? E como faço para ver mais sobre ferramentas semelhantes a ele?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'bytebank';
}Agradeço a atenção!
Olá Victor, tudo bom?
O Angular CLI é uma ferramenta que usa comandos via terminal para realizar tarefas que no geral levaria muito tempo. Imagina ter que criar todos os arquivos, baixar todas as bibliotecas e códigos para gerar uma nova aplicação Angular? Olha a quantidade de arquivo que tem só na pasta raiz da uma nova aplicação.
Por isso essa ferramenta é tão incrível.
Agora, vamos entender o que é um componente. O componente é composto por 3 arquivos, para template, estilo e classe. O template é onde fica toda a estrutura HTML, o estilo é a folha de estilo e a classe é onde configuramos o componente,. Toda essa configuração é feita dentro da decorador @Component onde é passado como metadados o template, o estilo e um seletor para que este componente possa ser usado em outro template.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'novo-projeto';
}No caso de AppComponent, ele é o componente que vai levar toda parte visual da aplicação para o index.html.
<!doctype html>
<html lang="en">
<head>
. . .
</head>
<body>
<app-root></app-root>
</body>
</html>Podemos criar um novo componente com o comando ng generate component components/primeiro-componente e olha que interessante, além de criar os arquivos ele cria uma pasta se passarmos o nome da pasta seguido de " / ". E ainda podemos abreviar para ng g c components/primeiro-component
CREATE src/app/components/primeiro-componente/primeiro-componente.component.html (34 bytes)
CREATE src/app/components/primeiro-componente/primeiro-componente.component.spec.ts (711 bytes)
CREATE src/app/components/primeiro-componente/primeiro-componente.component.ts (326 bytes)
CREATE src/app/components/primeiro-componente/primeiro-componente.component.css (0 bytes)
UPDATE src/app/app.module.ts (457 bytes)Com esse componente criado podemos usar ele no template do AppComponent e torná-lo visível. app.component.html:
<app-primeiro-componente></app-primeiro-componente>
<app-primeiro-componente></app-primeiro-componente>
<app-primeiro-componente></app-primeiro-componente>Ficou claro, Victor? Você também pode explorar mais recursos do Angular CLI com auxilio da documentação.
E sobre essas ferramentas de linha de comando, alguns frameworks como React e Vue.JS também usam comandos para alguns processos de desenvolvimentos. Temos cursos caso queira conhecer mais: React: desenvolvendo com JavaScript Vue3: explorando o framework
Espero ter ajudado
muito bom, a explicão