Arquivos na pasta app

Antes de explorar o componente principal, vamos revisar os arquivos encontrados na pasta app e seus papéis na aplicação.

Ao criar um novo projeto Angular, tudo começa na pasta app. É aqui que ficam armazenados os arquivos principais que definem a estrutura da sua aplicação. Nesta seção, será explorado o conteúdo desta pasta e apresentado o componente principal, que atua como ponto de entrada para a interface do usuário.

Componente Principal

Agora, será feita uma análise detalhada do componente principal, AppComponent. Este componente é criado por padrão ao executar o comando ng new e serve como o componente raiz da aplicação.

No Angular, componentes são criados utilizando decorators. Um decorator é uma função especial que adiciona funcionalidades extras a uma classe.

Dentro do decorator @Component, são especificadas configurações importantes que determinam como o componente será exibido e se comportará. Vamos detalhá-las:

Elementos principais no arquivo app.component.ts:

• Selector (selector) – define como o componente será nomeado no HTML. Neste caso, pode ser utilizado como <app-root></app-root>;

• Imports (imports) – lista de dependências necessárias para o funcionamento do componente. Neste exemplo, utiliza RouterOutlet, que gerencia a exibição do conteúdo conforme a rota;

• Template (templateUrl) – caminho para o arquivo HTML (app.component.html) que contém o template do componente;

• Styles (styleUrls) – caminho para o arquivo CSS (app.component.css) que define a aparência do componente.

Como o Componente Principal é Utilizado

O processo começa no arquivo index.html localizado na pasta src. Ele não contém conteúdo típico, apenas uma estrutura básica com uma tag especial:

Essa tag <app-root> corresponde ao selector em app.component.ts. Quando o Angular é inicializado, ele encontra essa tag e a substitui pelo conteúdo de app.component.html.

Conclusão

O componente principal é o núcleo da aplicação. Ele é carregado primeiro e gerencia o template central. Tudo o que é exibido na tela passa por ele. A tag <app-root> em index.html é o ponto de entrada pelo qual o Angular "entra" na página.