Clico de vida Angular

Fala aí Lars, tudo bem? Bom, vamos lá, existe todo um fluxo por trás de tudo isso, tentarei ser o mais simples possível.

A primeira coisa que acontece ao acessar uma URL X é:

No caso do seu exemplo, será renderizado o arquivo index.html

Dentro dele, teremos os arquivos .js á serem importados pelo browser. Após essa importação, começa o processo do Angular.

O primeiro passo, será descobrir qual componente deve ser renderizado, no seu exemplo deverá ser o componente app.componente.

Isso é possível saber olhando o arquivo main.ts que irá chamar como ponto de partida o app.module, Por sua vez o app.module irá chamar o app.componente.

Dentro do html do seu app.componente terá a chamada para ap-photo que se trata de outro componente.

Esse seria o exemplo mais simples, onde:

index.html > main.ts > app.module > app.componente > app.componente.html

Você também pode ver de outro jeito, olhando o index.html repare que o componente á ser chamado é o app-root. Esse seletor se refere ao app.componente.

Em outros exemplos vão existir rotas (mais para frente você irá estudar).

A ideia é mais ou menos essa.

Espero ter ajudado.

Matheus muito obrigado pela resposta. Deu uma ótima clareada!

Obrigado!

Ahh só mais uma duvida... Então toda aplicação angular sempre terá um index.html, ou um arquivo inicial que poderá ter outro nome certo? Como por exemplo quero que minha app inicie com o arquivo lars.html certo? Onde configuro isso, o primeiro arquivo a ser procurado?

Exatamente Lars, por padrão é o index.html, mas, com algumas modificações nas configurações é possível trocar esse nome para QUALQUER_COISA.html.

Essa configuração pode ser feita no angular.json, dentro dele, proure por:

"index": "src/index.html"

Talvez precise de mais algumas configurações além dessa troca.

Espero ter ajudado.