Uma aplicação angular típica consiste em muitos componentes.
Componentes controlam uma parte da tela chamada como uma exibição em Angular.
Então, quando você cria sua tela em seu aplicativo Angular,
você pode dividir sua tela em várias visualizações,
cada uma delas sendo controlada por um componente separado.
Até agora, no exemplo,
temos um único componente raiz que controla toda a tela.
Nesta lição, vamos adicionar mais um componente que faz parte da tela e toma o controle
dessa parte da tela e cuida de
toda a renderização dessa parte da tela, aqui.
Vamos fazer uma visita rápida ao componente App que
já temos como parte da nossa aplicação Angular.
Então, neste componente,
você pode ver que estamos importando o componente do núcleo Angular.
Então, isso nos fornece a capacidade de
definir um decorador componente e aplicá-lo à nossa classe.
Então, isso definirá um componente que faz parte da nossa aplicação Angular.
Então, aqui, este componente em particular,
como você pode ver, quando você define o decorador componente,
ele consiste em várias propriedades aqui uma delas sendo o seletor, aqui.
Agora, esta propriedade selector em particular define uma string aqui.
Note, em particular, o que está contido dentro da string.
Ele diz app-root.
Agora, olhando para trás no arquivo index.html.
Então, eu estou indo para index.html arquivo.
Você pode ver que ali mesmo,
estamos usando este app-root como uma das tags em nosso arquivo index.html.
Então, agora você vê que esta tag particular que você está usando refere-se
ao seletor do que nós especificamos aqui, app-root.
Então, se você quiser dar uma parte da tela e tornar isso controlável por um componente,
então você usa o seletor para especificar e, em seguida, você incluirá
a tag seletor em seu arquivo HTML.
A mesma coisa se aplica também ao modelo de um componente.
Se você incluir outro seletor de outro componente
no modelo deste componente,
então essa parte da tela será entregue a
o segundo componente a ser controlado a partir do segundo componente.
Nós também aprenderemos sobre isso em uma das lições posteriores.
Agora, a segunda parte que você vê sendo especificada é TemplateURL.
Este TemplateURL especifica o nome do arquivo de modelo para este componente específico.
Então, neste caso, como você pode ver, este é app.component.html.
Então, essa é a razão pela qual o modelo está sendo definido no arquivo
app.component.html para este componente específico.
Além disso, você também pode fornecer estilos para esta aplicação.
Então, aqui estamos dizendo styleURLs e, em seguida, aqui,
dentro de colchetes você está fornecendo este ditado./app.component.scss.
Então, o que significa que este arquivo SaaS específico é aplicado a este estilo.
Então, como você viu quando criamos nosso aplicativo Angular,
Eu especifiquei para o formato de estilo que eu vou usar é um SCSS.
Então, essa é a razão pela qual esses arquivos são SCSS.
Se você não usar o estilo SCSS e criar normalmente,
então estes seriam apenas arquivos CSS e, em seguida, você pode usar CSS para definir
os estilos que podem ser usados em seus modelos de aplicativo ou em seus modelos de componente.
Então, se você tiver algum componente específico de
estilos que você deseja incluir para este componente específico,
então você irá incluí-los neste arquivo.
Você também pode especificar o modelo e o estilo em linha.
Então, se você especificar o estilo ou o modelo em linha,
você simplesmente especificaria isso como com aspas.
Então, por exemplo, eu posso simplesmente,
em vez de fazer o TemplateURL,
Eu posso simplesmente editar isso para modelo e
então eu vou definir o modelo dentro de aspas traseiras aqui.
Então eu diria e dentro de volta qootes eu posso até fazer modelos como este.
Então, eu posso dizer h1 e depois título.
Então, isso seria o que chamamos como modelo em linha que usamos dentro da nossa aplicação.
Agora, se você usar aspas,
você também pode usar coisas como dólar add on em
para usar variáveis dentro de seus templates e assim por diante.
Neste curso em particular,
vamos usar arquivos de modelo separados
e criar os modelos nesses arquivos HTML em vez disso.
Prefiro esse método de definir meus modelos em vez de fazer modelos em linha.
Mas se o seu modelo é muito simples e contém apenas duas ou três linhas,
então, por todos os meios, use um modelo em linha como este dentro da sua aplicação.
Então, deixe-me alterá-lo de volta para o meu valor original aqui.
Mesma coisa para estilos.
Além disso, eu posso simplesmente dizer estilos e, em seguida, dentro de aspas traseiras
incluem minhas classes CSS dentro das aspas traseiras.
Embora, como eu mencionei,
Eu prefiro mantê-los em arquivos separados apenas por ter código limpo em meus arquivos.ts aqui.
Então, temos estilos de modelo seletor.
Nós também teremos outro chamado ID do módulo.
No momento eu não estou usando isso para o meu componente,
mas em alguns casos você precisará especificar o ID do módulo explicitamente para o seu componente.
Vamos ver alguns exemplos disso um pouco mais tarde.
Agora, além disso, um componente não passa de uma classe JavaScript ou uma classe Type Script.
Então é por isso que você vê aqui,
definindo uma classe dizendo AppComponent e, em seguida, você está exportando esta classe.
A razão pela qual usamos a exportação aqui,
para que este componente possa ser importado para o módulo do meu aplicativo.
Então você viu que estávamos importando isso para o meu módulo de aplicativo.
Assim, sempre que você quiser fazer qualquer componente ou um módulo em portátil em outro módulo,
então você sempre iria preceder a exportação para a classe aqui.
Então, além disso, também,
vemos que temos algumas propriedades locais que definimos
dentro de nossas classes aqui e estes seriam acessíveis através do meu modelo.
Então eu posso fazer uso destes no meu modelo.
Assim, as propriedades que são definidas dentro do meu arquivo
component.ts são acessíveis a partir dos meus arquivos de modelo.
Falaremos sobre o aspetor de ligação de dados um pouco mais tarde em outra lição.
Para resumir, o que aprendemos até agora é que um componente é definido por
especificando o código e também especificando o modelo correspondente.
Então, dentro do código você pode definir propriedades e métodos
que serão acessíveis a partir do seu modelo a partir do modelo correspondente.
Então, como você viu, nos metadados,
no decorador, no decorador do componente,
você especificou o nome do arquivo de modelo como uma
das propriedades para sua classe de componente aqui.
Da mesma forma, todas as propriedades e métodos que você definir em
seu componente estarão acessíveis a partir do seu modelo.
Não só isso, você também pode ter o que é chamado como evento
vinculação de seu modelo de volta para seus componentes.
Então, se algum evento for gerado em seus templates, por exemplo,
clicando em um botão em seu template que pode acionar
chamadas para métodos dentro de seu código aqui,
o Javascript ou o código Type Script aqui.
Vamos ver o uso daqueles em uma das lições posteriores e, em seguida, lá, eu vou, novamente,
revisitar este ponto sobre a vinculação de propriedade e vinculação de eventos,
e explicar isso para você com um pouco mais de detalhes.
Os componentes em um aplicativo Angular podem ser organizados em uma hierarquia.
Então, você sempre terá um componente raiz.
Assim, para a nossa aplicação,
o arquivo app.component.ts e
o modelo HTML correspondente forma o componente raiz para a nossa aplicação
e este componente raiz pode então conter componentes
para baixo em uma hierarquia e pode incluir componentes na hierarquia.
Vamos ver isso no próximo exercício,
onde vamos criar outro componente e, em seguida, usá-lo em nosso componente raiz.
Então, você pode ter vários componentes sendo
incluídos em seu componente raiz e esses componentes
em si, por sua vez, podem usar outros componentes que estão incluídos dentro deles.
Então, essa hierarquia de componentes é o que permite que você projete a tela do seu aplicativo.
Com esta rápida compreensão dos componentes
e como os componentes são úteis para projetar a nossa aplicação,
vamos agora passar para o nosso próximo exercício onde vamos criar
e adicionar outro componente à nossa aplicação Angular
e, em seguida, vamos definir um modelo para esse componente e, em seguida, nós fará uso de
esse componente dentro do nosso componente raiz para projetar nossa tela.