1
00:00:03,650 --> 00:00:09,520
Uma aplicação angular típica consiste em muitos componentes.

2
00:00:09,520 --> 00:00:16,225
Componentes controlam uma parte da tela chamada como uma exibição em Angular.

3
00:00:16,225 --> 00:00:21,840
Então, quando você cria sua tela em seu aplicativo Angular,

4
00:00:21,840 --> 00:00:25,310
você pode dividir sua tela em várias visualizações,

5
00:00:25,310 --> 00:00:29,384
cada uma delas sendo controlada por um componente separado.

6
00:00:29,384 --> 00:00:31,200
Até agora, no exemplo,

7
00:00:31,200 --> 00:00:35,715
temos um único componente raiz que controla toda a tela.

8
00:00:35,715 --> 00:00:42,440
Nesta lição, vamos adicionar mais um componente que faz parte da tela e toma o controle

9
00:00:42,440 --> 00:00:45,890
dessa parte da tela e cuida de

10
00:00:45,890 --> 00:00:50,275
toda a renderização dessa parte da tela, aqui.

11
00:00:50,275 --> 00:00:54,060
Vamos fazer uma visita rápida ao componente App que

12
00:00:54,060 --> 00:00:57,350
já temos como parte da nossa aplicação Angular.

13
00:00:57,350 --> 00:00:58,730
Então, neste componente,

14
00:00:58,730 --> 00:01:04,250
você pode ver que estamos importando o componente do núcleo Angular.

15
00:01:04,250 --> 00:01:07,100
Então, isso nos fornece a capacidade de

16
00:01:07,100 --> 00:01:11,585
definir um decorador componente e aplicá-lo à nossa classe.

17
00:01:11,585 --> 00:01:16,640
Então, isso definirá um componente que faz parte da nossa aplicação Angular.

18
00:01:16,640 --> 00:01:19,590
Então, aqui, este componente em particular,

19
00:01:19,590 --> 00:01:22,970
como você pode ver, quando você define o decorador componente,

20
00:01:22,970 --> 00:01:30,450
ele consiste em várias propriedades aqui uma delas sendo o seletor, aqui.

21
00:01:30,450 --> 00:01:36,375
Agora, esta propriedade selector em particular define uma string aqui.

22
00:01:36,375 --> 00:01:40,010
Note, em particular, o que está contido dentro da string.

23
00:01:40,010 --> 00:01:42,080
Ele diz app-root.

24
00:01:42,080 --> 00:01:46,270
Agora, olhando para trás no arquivo index.html.

25
00:01:46,270 --> 00:01:48,915
Então, eu estou indo para index.html arquivo.

26
00:01:48,915 --> 00:01:51,400
Você pode ver que ali mesmo,

27
00:01:51,400 --> 00:02:00,570
estamos usando este app-root como uma das tags em nosso arquivo index.html.

28
00:02:00,570 --> 00:02:05,630
Então, agora você vê que esta tag particular que você está usando refere-se

29
00:02:05,630 --> 00:02:11,270
ao seletor do que nós especificamos aqui, app-root.

30
00:02:11,270 --> 00:02:18,500
Então, se você quiser dar uma parte da tela e tornar isso controlável por um componente,

31
00:02:18,500 --> 00:02:23,135
então você usa o seletor para especificar e, em seguida, você incluirá

32
00:02:23,135 --> 00:02:28,310
a tag seletor em seu arquivo HTML.

33
00:02:28,310 --> 00:02:32,190
A mesma coisa se aplica também ao modelo de um componente.

34
00:02:32,190 --> 00:02:35,330
Se você incluir outro seletor de outro componente

35
00:02:35,330 --> 00:02:39,350
no modelo deste componente,

36
00:02:39,350 --> 00:02:42,770
então essa parte da tela será entregue a

37
00:02:42,770 --> 00:02:46,440
o segundo componente a ser controlado a partir do segundo componente.

38
00:02:46,440 --> 00:02:52,304
Nós também aprenderemos sobre isso em uma das lições posteriores.

39
00:02:52,304 --> 00:02:57,970
Agora, a segunda parte que você vê sendo especificada é TemplateURL.

40
00:02:57,970 --> 00:03:06,560
Este TemplateURL especifica o nome do arquivo de modelo para este componente específico.

41
00:03:06,560 --> 00:03:10,970
Então, neste caso, como você pode ver, este é app.component.html.

42
00:03:10,970 --> 00:03:14,720
Então, essa é a razão pela qual o modelo está sendo definido no arquivo

43
00:03:14,720 --> 00:03:19,605
app.component.html para este componente específico.

44
00:03:19,605 --> 00:03:25,270
Além disso, você também pode fornecer estilos para esta aplicação.

45
00:03:25,270 --> 00:03:30,105
Então, aqui estamos dizendo styleURLs e, em seguida, aqui,

46
00:03:30,105 --> 00:03:36,610
dentro de colchetes você está fornecendo este ditado./app.component.scss.

47
00:03:36,610 --> 00:03:44,175
Então, o que significa que este arquivo SaaS específico é aplicado a este estilo.

48
00:03:44,175 --> 00:03:48,620
Então, como você viu quando criamos nosso aplicativo Angular,

49
00:03:48,620 --> 00:03:53,970
Eu especifiquei para o formato de estilo que eu vou usar é um SCSS.

50
00:03:53,970 --> 00:03:56,650
Então, essa é a razão pela qual esses arquivos são SCSS.

51
00:03:56,650 --> 00:04:01,190
Se você não usar o estilo SCSS e criar normalmente,

52
00:04:01,190 --> 00:04:06,860
então estes seriam apenas arquivos CSS e, em seguida, você pode usar CSS para definir

53
00:04:06,860 --> 00:04:16,020
os estilos que podem ser usados em seus modelos de aplicativo ou em seus modelos de componente.

54
00:04:16,020 --> 00:04:19,820
Então, se você tiver algum componente específico de

55
00:04:19,820 --> 00:04:23,000
estilos que você deseja incluir para este componente específico,

56
00:04:23,000 --> 00:04:25,565
então você irá incluí-los neste arquivo.

57
00:04:25,565 --> 00:04:29,965
Você também pode especificar o modelo e o estilo em linha.

58
00:04:29,965 --> 00:04:33,280
Então, se você especificar o estilo ou o modelo em linha,

59
00:04:33,280 --> 00:04:37,785
você simplesmente especificaria isso como com aspas.

60
00:04:37,785 --> 00:04:40,080
Então, por exemplo, eu posso simplesmente,

61
00:04:40,080 --> 00:04:42,520
em vez de fazer o TemplateURL,

62
00:04:42,520 --> 00:04:47,180
Eu posso simplesmente editar isso para modelo e

63
00:04:47,180 --> 00:04:52,475
então eu vou definir o modelo dentro de aspas traseiras aqui.

64
00:04:52,475 --> 00:04:59,420
Então eu diria e dentro de volta qootes eu posso até fazer modelos como este.

65
00:04:59,420 --> 00:05:07,360
Então, eu posso dizer h1 e depois título.

66
00:05:07,360 --> 00:05:17,060
Então, isso seria o que chamamos como modelo em linha que usamos dentro da nossa aplicação.

67
00:05:17,060 --> 00:05:19,280
Agora, se você usar aspas,

68
00:05:19,280 --> 00:05:23,690
você também pode usar coisas como dólar add on em

69
00:05:23,690 --> 00:05:28,955
para usar variáveis dentro de seus templates e assim por diante.

70
00:05:28,955 --> 00:05:31,235
Neste curso em particular,

71
00:05:31,235 --> 00:05:34,820
vamos usar arquivos de modelo separados

72
00:05:34,820 --> 00:05:39,590
e criar os modelos nesses arquivos HTML em vez disso.

73
00:05:39,590 --> 00:05:45,050
Prefiro esse método de definir meus modelos em vez de fazer modelos em linha.

74
00:05:45,050 --> 00:05:49,180
Mas se o seu modelo é muito simples e contém apenas duas ou três linhas,

75
00:05:49,180 --> 00:05:56,235
então, por todos os meios, use um modelo em linha como este dentro da sua aplicação.

76
00:05:56,235 --> 00:06:02,930
Então, deixe-me alterá-lo de volta para o meu valor original aqui.

77
00:06:02,930 --> 00:06:04,770
Mesma coisa para estilos.

78
00:06:04,770 --> 00:06:08,240
Além disso, eu posso simplesmente dizer estilos e, em seguida, dentro de aspas traseiras

79
00:06:08,240 --> 00:06:12,500
incluem minhas classes CSS dentro das aspas traseiras.

80
00:06:12,500 --> 00:06:15,245
Embora, como eu mencionei,

81
00:06:15,245 --> 00:06:24,895
Eu prefiro mantê-los em arquivos separados apenas por ter código limpo em meus arquivos.ts aqui.

82
00:06:24,895 --> 00:06:27,515
Então, temos estilos de modelo seletor.

83
00:06:27,515 --> 00:06:30,010
Nós também teremos outro chamado ID do módulo.

84
00:06:30,010 --> 00:06:33,020
No momento eu não estou usando isso para o meu componente,

85
00:06:33,020 --> 00:06:40,395
mas em alguns casos você precisará especificar o ID do módulo explicitamente para o seu componente.

86
00:06:40,395 --> 00:06:44,610
Vamos ver alguns exemplos disso um pouco mais tarde.

87
00:06:44,610 --> 00:06:50,955
Agora, além disso, um componente não passa de uma classe JavaScript ou uma classe Type Script.

88
00:06:50,955 --> 00:06:53,615
Então é por isso que você vê aqui,

89
00:06:53,615 --> 00:06:58,960
definindo uma classe dizendo AppComponent e, em seguida, você está exportando esta classe.

90
00:06:58,960 --> 00:07:01,820
A razão pela qual usamos a exportação aqui,

91
00:07:01,820 --> 00:07:06,820
para que este componente possa ser importado para o módulo do meu aplicativo.

92
00:07:06,820 --> 00:07:10,070
Então você viu que estávamos importando isso para o meu módulo de aplicativo.

93
00:07:10,070 --> 00:07:18,350
Assim, sempre que você quiser fazer qualquer componente ou um módulo em portátil em outro módulo,

94
00:07:18,350 --> 00:07:25,245
então você sempre iria preceder a exportação para a classe aqui.

95
00:07:25,245 --> 00:07:28,040
Então, além disso, também,

96
00:07:28,040 --> 00:07:34,295
vemos que temos algumas propriedades locais que definimos

97
00:07:34,295 --> 00:07:43,220
dentro de nossas classes aqui e estes seriam acessíveis através do meu modelo.

98
00:07:43,220 --> 00:07:45,340
Então eu posso fazer uso destes no meu modelo.

99
00:07:45,340 --> 00:07:48,170
Assim, as propriedades que são definidas dentro do meu arquivo

100
00:07:48,170 --> 00:07:53,230
component.ts são acessíveis a partir dos meus arquivos de modelo.

101
00:07:53,230 --> 00:08:00,875
Falaremos sobre o aspetor de ligação de dados um pouco mais tarde em outra lição.

102
00:08:00,875 --> 00:08:08,075
Para resumir, o que aprendemos até agora é que um componente é definido por

103
00:08:08,075 --> 00:08:15,990
especificando o código e também especificando o modelo correspondente.

104
00:08:15,990 --> 00:08:19,850
Então, dentro do código você pode definir propriedades e métodos

105
00:08:19,850 --> 00:08:24,455
que serão acessíveis a partir do seu modelo a partir do modelo correspondente.

106
00:08:24,455 --> 00:08:26,530
Então, como você viu, nos metadados,

107
00:08:26,530 --> 00:08:29,370
no decorador, no decorador do componente,

108
00:08:29,370 --> 00:08:33,425
você especificou o nome do arquivo de modelo como uma

109
00:08:33,425 --> 00:08:38,380
das propriedades para sua classe de componente aqui.

110
00:08:38,380 --> 00:08:41,870
Da mesma forma, todas as propriedades e métodos que você definir em

111
00:08:41,870 --> 00:08:45,875
seu componente estarão acessíveis a partir do seu modelo.

112
00:08:45,875 --> 00:08:49,645
Não só isso, você também pode ter o que é chamado como evento

113
00:08:49,645 --> 00:08:53,450
vinculação de seu modelo de volta para seus componentes.

114
00:08:53,450 --> 00:08:57,320
Então, se algum evento for gerado em seus templates, por exemplo,

115
00:08:57,320 --> 00:09:02,180
clicando em um botão em seu template que pode acionar

116
00:09:02,180 --> 00:09:08,535
chamadas para métodos dentro de seu código aqui,

117
00:09:08,535 --> 00:09:11,400
o Javascript ou o código Type Script aqui.

118
00:09:11,400 --> 00:09:16,790
Vamos ver o uso daqueles em uma das lições posteriores e, em seguida, lá, eu vou, novamente,

119
00:09:16,790 --> 00:09:20,180
revisitar este ponto sobre a vinculação de propriedade e vinculação de eventos,

120
00:09:20,180 --> 00:09:23,500
e explicar isso para você com um pouco mais de detalhes.

121
00:09:23,500 --> 00:09:29,840
Os componentes em um aplicativo Angular podem ser organizados em uma hierarquia.

122
00:09:29,840 --> 00:09:32,470
Então, você sempre terá um componente raiz.

123
00:09:32,470 --> 00:09:33,835
Assim, para a nossa aplicação,

124
00:09:33,835 --> 00:09:37,130
o arquivo app.component.ts e

125
00:09:37,130 --> 00:09:43,039
o modelo HTML correspondente forma o componente raiz para a nossa aplicação

126
00:09:43,039 --> 00:09:46,724
e este componente raiz pode então conter componentes

127
00:09:46,724 --> 00:09:52,825
para baixo em uma hierarquia e pode incluir componentes na hierarquia.

128
00:09:52,825 --> 00:09:56,750
Vamos ver isso no próximo exercício,

129
00:09:56,750 --> 00:10:02,275
onde vamos criar outro componente e, em seguida, usá-lo em nosso componente raiz.

130
00:10:02,275 --> 00:10:04,960
Então, você pode ter vários componentes sendo

131
00:10:04,960 --> 00:10:08,005
incluídos em seu componente raiz e esses componentes

132
00:10:08,005 --> 00:10:13,690
em si, por sua vez, podem usar outros componentes que estão incluídos dentro deles.

133
00:10:13,690 --> 00:10:21,075
Então, essa hierarquia de componentes é o que permite que você projete a tela do seu aplicativo.

134
00:10:21,075 --> 00:10:24,940
Com esta rápida compreensão dos componentes

135
00:10:24,940 --> 00:10:28,810
e como os componentes são úteis para projetar a nossa aplicação,

136
00:10:28,810 --> 00:10:32,935
vamos agora passar para o nosso próximo exercício onde vamos criar

137
00:10:32,935 --> 00:10:37,339
e adicionar outro componente à nossa aplicação Angular

138
00:10:37,339 --> 00:10:41,810
e, em seguida, vamos definir um modelo para esse componente e, em seguida, nós fará uso de

139
00:10:41,810 --> 00:10:47,230
esse componente dentro do nosso componente raiz para projetar nossa tela.