1
00:00:00,000 --> 00:00:04,599
[MÚSICA]

2
00:00:04,599 --> 00:00:09,853
Acabamos de criar nossa primeira aplicação Angular no exercício anterior.

3
00:00:09,853 --> 00:00:13,758
Você deve estar se perguntando, como é um aplicativo Angular típico?

4
00:00:13,758 --> 00:00:16,345
Qual é sua estrutura e arquitetura, e

5
00:00:16,345 --> 00:00:18,669
como construir um aplicativo Angular?

6
00:00:19,800 --> 00:00:25,560
Vamos falar sobre essas coisas passo a passo, começando com esta palestra.

7
00:00:27,390 --> 00:00:34,280
Dando uma olhada rápida na pasta do aplicativo, em um editor.

8
00:00:34,280 --> 00:00:39,469
Você percebe imediatamente que o Angular CLI criou um monte de arquivos

9
00:00:40,530 --> 00:00:45,820
em várias pastas em nosso aplicativo.

10
00:00:47,260 --> 00:00:50,240
O que esses arquivos contêm?

11
00:00:50,240 --> 00:00:53,930
Como eles constituem uma aplicação Angular?

12
00:00:53,930 --> 00:00:58,832
Vamos examiná-los passo a passo para entender a arquitetura típica de

13
00:00:58,832 --> 00:01:00,556
um aplicativo Angular.

14
00:01:00,556 --> 00:01:03,688
Como já percebemos,

15
00:01:03,688 --> 00:01:08,828
aplicações angulares são construídas como uma combinação

16
00:01:08,828 --> 00:01:13,727
de HTML e TypeScript ou JavaScript.

17
00:01:13,727 --> 00:01:18,735
Neste curso vamos usar TypeScript como a linguagem de escolha para

18
00:01:18,735 --> 00:01:21,169
construindo nossa aplicação Angular.

19
00:01:21,169 --> 00:01:25,146
Angular em si consiste em várias bibliotecas,

20
00:01:25,146 --> 00:01:30,585
algumas delas chamadas bibliotecas e outras são bibliotecas opcionais.

21
00:01:30,585 --> 00:01:35,389
Dependendo do tipo de aplicativo Angular que você está tentando construir,

22
00:01:35,389 --> 00:01:38,910
você incluirá alguns deles em seu aplicativo.

23
00:01:38,910 --> 00:01:44,510
Como já aprendemos, Angular é um framework JavaScript e

24
00:01:44,510 --> 00:01:48,610
vamos aproveitar isso para construir nosso aplicativo.

25
00:01:49,715 --> 00:01:56,800
Para resumir, a aplicação Angular é modular em sua natureza e consistirá em

26
00:01:56,800 --> 00:02:03,160
vários componentes, juntamente com seus modelos, que compõem a aplicação.

27
00:02:03,160 --> 00:02:09,090
Não só isso, esses componentes, e outras partes do aplicativo Angular,

28
00:02:09,090 --> 00:02:13,060
como serviços, serão organizados em módulos.

29
00:02:13,060 --> 00:02:18,892
E esses módulos, por sua vez, serão usados por módulos de nível superior.

30
00:02:18,892 --> 00:02:23,889
Então você pode olhar para um aplicativo Angular sendo uma arquitetura

31
00:02:23,889 --> 00:02:27,822
modular com um módulo raiz no topo,

32
00:02:27,822 --> 00:02:34,966
que leva a ajuda de outros módulos organizados em sua hierarquia de modelagem.

33
00:02:34,966 --> 00:02:41,170
Vamos examinar nossa aplicação para entender como isso é criado.

34
00:02:41,170 --> 00:02:45,550
Antes de prosseguirmos, o módulo raiz por padrão

35
00:02:45,550 --> 00:02:50,810
em Angular é normalmente chamado de módulo de aplicativo.

36
00:02:50,810 --> 00:02:55,970
Indo para o nosso código, vamos começar nossa jornada e index.html.

37
00:02:55,970 --> 00:03:03,519
Então, neste arquivo index.html, você pode ver que temos o código html típico aqui,

38
00:03:03,519 --> 00:03:09,079
junto com esta linha particular que diz app-root.

39
00:03:09,079 --> 00:03:15,270
Você os reconhece imediatamente, isso não se parece com uma tag HTML típica.

40
00:03:15,270 --> 00:03:20,130
Então vamos começar fazendo a nós mesmos a pergunta, o que isso significa, e

41
00:03:20,130 --> 00:03:25,970
por que isso está incluído na página index.html?

42
00:03:25,970 --> 00:03:31,090
Como já vimos, um aplicativo Angular típico

43
00:03:31,090 --> 00:03:35,490
é uma hierarquia de módulos com um módulo raiz.

44
00:03:35,490 --> 00:03:40,660
Seu aplicativo Angular é inicializado inicializando o módulo raiz

45
00:03:40,660 --> 00:03:42,520
para iniciar seu aplicativo.

46
00:03:42,520 --> 00:03:46,430
Então, como inicializamos um aplicativo Angular?

47
00:03:46,430 --> 00:03:53,566
Nós já vimos a página index.html, e você viu um elemento lá chamado app-root.

48
00:03:53,566 --> 00:03:58,306
Então vamos nos fazer mais algumas perguntas.

49
00:03:58,306 --> 00:04:03,102
Um companheiro para a página index.html é o arquivo main.ts.

50
00:04:03,102 --> 00:04:07,602
Se você abrir esse arquivo, você verá que ele contém um conjunto

51
00:04:07,602 --> 00:04:12,790
de instruções de importação em TypeScript, como escrito aqui.

52
00:04:12,790 --> 00:04:16,460
Não vamos aprofundar muito nos detalhes, mas

53
00:04:16,460 --> 00:04:20,160
Voltarei para explicar isso em pouco tempo.

54
00:04:20,160 --> 00:04:21,652
Mas, em particular,

55
00:04:21,652 --> 00:04:27,017
deixe-me chamar sua atenção para esta linha particular no arquivo main.ts.

56
00:04:27,017 --> 00:04:31,600
Que diz PlatformBrowserDynamic () .BootstrapModule

57
00:04:31,600 --> 00:04:36,277
e, em seguida, anote o parâmetro aqui, que diz (AppModule).

58
00:04:36,277 --> 00:04:41,075
Então, como eu mencionei, anteriormente o módulo de aplicativo é o típico nome

59
00:04:41,075 --> 00:04:45,985
dado ao módulo raiz em um aplicativo Angular.

60
00:04:45,985 --> 00:04:48,643
Se você olhar para a hierarquia de arquivos,

61
00:04:48,643 --> 00:04:52,867
você já verá um arquivo chamado app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Vamos visitar esse arquivo em pouco tempo para ver o que ele contém.

63
00:04:57,131 --> 00:04:59,877
Agora, voltando a essas importações,

64
00:04:59,877 --> 00:05:05,250
você pode ver que vamos tomar o exemplo da primeira importação aqui.

65
00:05:05,250 --> 00:05:10,330
Ele diz importação EnableProdMode de '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Então o que isso especifica é que vamos importar este módulo

67
00:05:15,740 --> 00:05:19,970
particular da biblioteca do núcleo Angular.

68
00:05:19,970 --> 00:05:24,820
E da mesma forma, você vê o segundo dizendo import PlatformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
de '@angular /platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
Então, desta biblioteca você está importando este módulo para o lugar.

71
00:05:32,500 --> 00:05:37,896
Agora, o módulo PlatformBrowserDynamic permite que você inicialize

72
00:05:37,896 --> 00:05:44,100
seu aplicativo Angular tomando seu módulo raiz como um parâmetro.

73
00:05:44,100 --> 00:05:51,237
Obviamente há muitos outros arquivos nesta pasta e nas subpastas lá.

74
00:05:51,237 --> 00:05:55,534
Não vamos nos preocupar muito com eles no momento.

75
00:05:55,534 --> 00:05:59,900
Vamos aprender sobre alguns deles à medida que avançarmos neste curso.

76
00:05:59,900 --> 00:06:05,868
Agora, Angular CLI ajuda a criar essa hierarquia de pastas e arquivos

77
00:06:05,868 --> 00:06:09,848
, com as configurações necessárias para

78
00:06:09,848 --> 00:06:16,768
você para ser capaz de inicializar sua aplicação angular e começar.

79
00:06:16,768 --> 00:06:20,233
Fazer isso à mão é uma tarefa um pouco tediosa.

80
00:06:20,233 --> 00:06:24,811
Então, o Angular CLI simplifica a preparação

81
00:06:24,811 --> 00:06:29,460
da pasta para seu aplicativo Angular.

82
00:06:29,460 --> 00:06:36,210
Então, novamente, indo para o arquivo app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Como eu mencionei, este é o módulo raiz para sua aplicação Angular.

84
00:06:41,820 --> 00:06:47,912
Agora normalmente, o módulo raiz seria nomeado como arquivo app.module,

85
00:06:47,912 --> 00:06:51,915
mas que é apenas um nome sugerido em Angular.

86
00:06:51,915 --> 00:06:57,627
Você verá que muitos dos arquivos que constituem um aplicativo Angular,

87
00:06:57,627 --> 00:07:01,297
há maneiras sugeridas de nomear esses arquivos.

88
00:07:01,297 --> 00:07:05,889
À medida que passarmos pelo curso, aprenderemos especificamente sobre cada um desses arquivos

89
00:07:05,889 --> 00:07:06,720
.

90
00:07:06,720 --> 00:07:11,032
Então, dando uma olhada no conteúdo de app_module.ts,

91
00:07:11,032 --> 00:07:15,790
lá dentro você vê um conjunto de instruções de importação lá.

92
00:07:15,790 --> 00:07:19,213
Dando uma olhada rápida neles, ele diz import {browserModule} de

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Importar {ngModule} de '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
E ngModule é um módulo angular.

96
00:07:29,550 --> 00:07:34,070
Vamos aprender um pouco mais sobre isso um pouco mais tarde.

97
00:07:34,070 --> 00:07:38,532
Além disso, você vê outra instrução de importação aqui,

98
00:07:38,532 --> 00:07:44,159
que diz import {appComponent} from './app.component '.

99
00:07:44,159 --> 00:07:47,309
E dando uma olhada nos arquivos aqui,

100
00:07:47,309 --> 00:07:52,141
você já vê um app.component.tsfileware, e

101
00:07:52,141 --> 00:07:58,863
então vários outros arquivos aqui, incluindo um app.component card.html,

102
00:07:58,863 --> 00:08:02,972
um app.component.acss e outros arquivos.

103
00:08:02,972 --> 00:08:10,939
Agora, esta declaração especifica que este módulo raiz irá incluir este componente,

104
00:08:10,939 --> 00:08:17,640
e irá formar o complemento raiz da sua aplicação Angular.

105
00:08:17,640 --> 00:08:22,450
Um aplicativo Angular típico, como vimos, consiste em um número de módulos

106
00:08:22,450 --> 00:08:27,330
com o módulo raiz como o módulo principal,

107
00:08:27,330 --> 00:08:31,360
que ajuda você a inicializar seu aplicativo Angular.

108
00:08:31,360 --> 00:08:38,970
O módulo raiz é um módulo Angular com um recurso, ou é uma classe.

109
00:08:38,970 --> 00:08:44,690
Então, este é o lugar onde você vê o uso de uma classe TypeScript aqui,

110
00:08:44,690 --> 00:08:49,380
então, se você descer para o módulo vermelho abaixo aqui você verá

111
00:08:49,380 --> 00:08:53,485
esta instrução chamada Export class AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript adiciona classes ao seu código JavaScript típico.

113
00:08:59,550 --> 00:09:03,085
Se você está familiarizado com apenas ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
então as classes ainda não foram introduzidas lá, mas

115
00:09:06,873 --> 00:09:11,942
as versões mais recentes do JavaScript irão introduzir suporte para classes.

116
00:09:11,942 --> 00:09:14,971
TypeScript também tem suporte para classes.

117
00:09:14,971 --> 00:09:18,651
Então, se você tem experiência com programação orientada a objetos,

118
00:09:18,651 --> 00:09:21,139
você já está familiarizado com as classes.

119
00:09:21,139 --> 00:09:27,106
Então esse tipo de abordagem está sendo trazido para JavaScript com a introdução

120
00:09:27,106 --> 00:09:31,750
de classes em TypeScript e futuras versões do JavaScript.

121
00:09:31,750 --> 00:09:37,028
Além disso, você notará que esta classe tem

122
00:09:37,028 --> 00:09:42,314
um decorador Ngmodule associado a isso.

123
00:09:42,314 --> 00:09:47,312
Então, um decorador é, novamente, uma função de

124
00:09:47,312 --> 00:09:51,874
que modifica classes JavaScript.

125
00:09:51,874 --> 00:09:59,254
Veremos o uso de decoradores em muitos lugares em nossa aplicação Angular.

126
00:09:59,254 --> 00:10:00,980
Este é um Ngmodule.

127
00:10:00,980 --> 00:10:05,850
O decorador do que permite que você especifique alguns detalhes sobre este módulo de aplicativo

128
00:10:05,850 --> 00:10:06,797
.

129
00:10:06,797 --> 00:10:12,398
Assim, esta função decorador leva um determinado conjunto

130
00:10:12,398 --> 00:10:18,295
de metadados para ajudá-lo a descrever este módulo.

131
00:10:18,295 --> 00:10:23,232
Então este objeto de metadados aqui contém, como você pode ver,

132
00:10:23,232 --> 00:10:28,430
declarações, importações, provedores, bootstrap.

133
00:10:28,430 --> 00:10:33,080
E também conterá exportações se este módulo estiver exportando algo que pode ser

134
00:10:33,080 --> 00:10:35,110
usado por outro módulo.

135
00:10:35,110 --> 00:10:41,734
Como este é o módulo raiz, não temos uma exportação deste módulo.

136
00:10:41,734 --> 00:10:47,418
Então, em vez disso, só temos declarações, importações, provedores e bootstrap.

137
00:10:47,418 --> 00:10:52,243
Então aqui este é bastante direto para entender.

138
00:10:52,243 --> 00:10:57,280
Ele especifica que para inicializar este aplicativo Angular,

139
00:10:57,280 --> 00:11:00,713
precisamos inicializar o AppComponent.

140
00:11:00,713 --> 00:11:07,008
Assim, o AppComponent é o componente raiz da nossa aplicação Angular.

141
00:11:07,008 --> 00:11:13,595
Além disso, a parte de importações especifica as propriedades,

142
00:11:13,595 --> 00:11:22,040
vendo todos esses módulos precisam ser importados para serem usados com este módulo de aplicativo.

143
00:11:22,040 --> 00:11:25,770
Então, este módulo de aplicativo agora depende desses outros módulos.

144
00:11:25,770 --> 00:11:30,917
Então, estes são os módulos que vão ser importados para o módulo de aplicativo como

145
00:11:30,917 --> 00:11:36,494
parte da hierarquia, daí a razão pela qual importamos esses módulos aqui.

146
00:11:36,494 --> 00:11:38,451
Então, quando você importar os módulos,

147
00:11:38,451 --> 00:11:43,324
você está especificando aqui dizendo que o módulo do aplicativo fará uso deste módulo.

148
00:11:43,324 --> 00:11:48,462
Portanto, a propriedade imports especifica os módulos que precisam ser importados ou

149
00:11:48,462 --> 00:11:53,040
os módulos dos quais esse módulo específico é dependente.

150
00:11:53,040 --> 00:11:58,398
As declarações aqui, a propriedade declarations,

151
00:11:58,398 --> 00:12:02,940
é a propriedade que declara as classes view

152
00:12:02,940 --> 00:12:06,910
que pertencem a este módulo particular.

153
00:12:06,910 --> 00:12:10,584
Assim, as classes de visualização no caso de um módulo Angular seria

154
00:12:10,584 --> 00:12:15,018
estar na forma de componentes, diretivas e pipes.

155
00:12:15,018 --> 00:12:20,789
Nós vamos falar sobre diretivas e tubos um pouco mais tarde neste curso,

156
00:12:20,789 --> 00:12:24,416
falaremos sobre componentes na próxima lição.

157
00:12:24,416 --> 00:12:28,590
Os provedores especificam todos os serviços que este módulo

158
00:12:28,590 --> 00:12:31,753
em particular fará uso.

159
00:12:31,753 --> 00:12:36,592
Serviços sobre os quais falaremos um pouco mais detalhadamente em

160
00:12:36,592 --> 00:12:39,235
módulo da próxima semana.

161
00:12:39,235 --> 00:12:42,510
Falaremos mais detalhes sobre serviços, como os criamos,

162
00:12:42,510 --> 00:12:46,810
e como podemos utilizá-los com a nossa aplicação Angular.

163
00:12:46,810 --> 00:12:52,091
Para resumir o que aprendemos até agora, percebemos que um módulo

164
00:12:52,091 --> 00:12:57,373
em um aplicativo Angular pode consistir em um conjunto de componentes e

165
00:12:57,373 --> 00:13:02,671
serviços que serão necessários deste módulo importando-os.

166
00:13:02,671 --> 00:13:09,461
E estes serão declarados usando a propriedade de declarações

167
00:13:09,461 --> 00:13:15,220
do decorador Ngmodule em nosso módulo de aplicativo.

168
00:13:15,220 --> 00:13:19,845
Agora, esses componentes em si podem ser dependentes de

169
00:13:19,845 --> 00:13:24,178
outros componentes, ou serviços, ou diretivas, ou

170
00:13:24,178 --> 00:13:29,115
pipes, como veremos no resto deste curso em particular.

171
00:13:29,115 --> 00:13:37,212
Então, com isso, temos uma idéia aproximada de como uma aplicação Angular típica é estruturada.

172
00:13:37,212 --> 00:13:42,247
Voltando ao nosso código, agora é hora de examinar

173
00:13:42,247 --> 00:13:48,691
este arquivo app.component.ts e o arquivo app.component.html.

174
00:13:48,691 --> 00:13:53,502
Que declara o modelo para o nosso componente,

175
00:13:53,502 --> 00:13:57,022
e o arquivo app.component.ts,

176
00:13:57,022 --> 00:14:02,547
que especifica a parte TypeScript do nosso componente.

177
00:14:02,547 --> 00:14:08,157
Agora, vamos fazer isso na próxima lição, onde vamos lidar com componentes e

178
00:14:08,157 --> 00:14:13,436
como podemos criar novos componentes e adicioná-los à nossa aplicação Angular.

179
00:14:13,436 --> 00:14:16,815
[MÚSICA]