1
00:00:00,031 --> 00:00:04,477
[MÚSICA]

2
00:00:04,477 --> 00:00:09,184
Agora que tivemos uma rápida introdução às estruturas MVM e

3
00:00:09,184 --> 00:00:15,564
MVVM, serviços angulares, e também injeção de dependência,

4
00:00:15,564 --> 00:00:21,003
vamos agora passar para o nosso próximo exercício onde vamos criar o nosso primeiro serviço angular

5
00:00:21,003 --> 00:00:26,442
e depois injetá-lo em nosso componente e

6
00:00:26,442 --> 00:00:29,710
fazer uso dele dentro do nosso componente.

7
00:00:29,710 --> 00:00:34,370
Para começar, vá para seu aplicativo em

8
00:00:34,370 --> 00:00:38,629
o bloco do editor dentro da pasta App,

9
00:00:38,629 --> 00:00:44,237
crie uma nova subpasta e nomee-a como Serviços.

10
00:00:44,237 --> 00:00:52,918
Agora vamos fazer uso de Angular CLI para adicionar um novo serviço à nossa aplicação Angular.

11
00:00:52,918 --> 00:00:57,953
Para fazer isso, no prompt digite ng

12
00:00:57,953 --> 00:01:04,673
gerar serviço, e serviços/prato.

13
00:01:04,673 --> 00:01:11,480
Então, isso criará um novo serviço na pasta Serviços chamado serviço dish.

14
00:01:11,480 --> 00:01:16,815
Assim, uma vez criado, você verá que dois arquivos são criados

15
00:01:16,815 --> 00:01:23,837
pela Angular CLI chamada DishService.ts e dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
Este é usado para testar nosso serviço Angular enquanto falaremos sobre mais tarde.

17
00:01:30,010 --> 00:01:35,361
O segundo é onde vamos criar nosso serviço de prato e

18
00:01:35,361 --> 00:01:42,516
, em seguida, injetar isso em nosso módulo de aplicativo e fazer uso dele em nosso componente de menu.

19
00:01:42,516 --> 00:01:47,550
Indo para o editor, vamos abrir o arquivo dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
Agora, quando você abre este arquivo, você imediatamente percebe aqui a primeira instrução

21
00:01:52,618 --> 00:01:58,108
dizendo, import {Injectable} de '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Então este injetável nos permite definir este decorador

23
00:02:02,791 --> 00:02:06,674
injetável para qualquer classe que definimos aqui.

24
00:02:06,674 --> 00:02:10,730
Então você pode ver que estamos definindo uma classe aqui chamada DishService.

25
00:02:10,730 --> 00:02:15,532
Ao usar este decorador injetável para este serviço de prato,

26
00:02:15,532 --> 00:02:21,030
estamos tornando este objeto agora injetável dentro de nossa aplicação.

27
00:02:21,030 --> 00:02:25,481
Então isso é o que permite que a injeção de dependência seja usada dentro da nossa aplicação

28
00:02:25,481 --> 00:02:26,490
.

29
00:02:26,490 --> 00:02:30,345
Assim, uma vez que você declarar a classe como injetável,

30
00:02:30,345 --> 00:02:36,746
vamos agora configurar nosso DishService para fornecer algumas informações para nós.

31
00:02:36,746 --> 00:02:39,119
Então aqui, eu vou importar,

32
00:02:42,757 --> 00:02:51,413
A classe Dish da pasta compartilhada,

33
00:02:51,413 --> 00:02:55,354
e também importar,

34
00:02:58,307 --> 00:03:01,887
A constante pratos de,

35
00:03:08,402 --> 00:03:11,574
pasta compartilhada aqui.

36
00:03:11,574 --> 00:03:14,353
Assim, uma vez que eu tenha importado esses dois,

37
00:03:14,353 --> 00:03:19,432
agora meu serviço pode ser configurado para fornecer o valor para nós.

38
00:03:19,432 --> 00:03:24,246
Então, dentro do serviço, eu estou indo para

39
00:03:24,246 --> 00:03:29,370
adicionar em um novo método chamada getDistes, e

40
00:03:29,370 --> 00:03:35,753
este método vai retornar em uma variedade de pratos aqui.

41
00:03:35,753 --> 00:03:41,098
E, assim, este método irá retornar a constante DISTRAS

42
00:03:41,098 --> 00:03:45,722
que importamos para o nosso DishService.

43
00:03:45,722 --> 00:03:50,239
Com isso, nosso DishService agora está configurado para

44
00:03:50,239 --> 00:03:54,866
fornecer essa matriz de objetos JavaScript DICHAS para qualquer

45
00:03:54,866 --> 00:03:59,398
outra parte da nossa aplicação que o requeira.

46
00:03:59,398 --> 00:04:03,862
Agora, antes que isso aconteça, precisamos tomar este serviço e

47
00:04:03,862 --> 00:04:06,660
, em seguida, injetar em nosso aplicativo.

48
00:04:06,660 --> 00:04:11,652
Para fazer isso, vamos abrir o arquivo.ts módulo de aplicativo.

49
00:04:11,652 --> 00:04:17,214
Então, dentro do arquivo.ts módulo app, logo após importar

50
00:04:17,214 --> 00:04:22,333
os componentes ali mesmo, eu vou importar o,

51
00:04:25,974 --> 00:04:34,950
DishService bem ali.

52
00:04:34,950 --> 00:04:36,618
E isso é importado de,

53
00:04:42,730 --> 00:04:46,466
Serviços DishService aqui.

54
00:04:46,466 --> 00:04:53,885
Então, uma vez que importamos isso, então vamos declarar este DishService como um provedor.

55
00:04:53,885 --> 00:04:58,121
Então, se você entrar no decorador do módulo ng, então

56
00:04:58,121 --> 00:05:03,170
você vê esta terceira propriedade aqui chamada provedores.

57
00:05:03,170 --> 00:05:05,960
Então temos declarações, importações e provedores.

58
00:05:05,960 --> 00:05:11,176
Assim, sempre que você tiver um serviço que você deseja disponibilizar para

59
00:05:11,176 --> 00:05:14,860
todos os componentes de parte deste módulo.

60
00:05:14,860 --> 00:05:21,170
Então você especificará isso como um provedor dentro do módulo aqui.

61
00:05:21,170 --> 00:05:25,618
Então aí mesmo, eu vou dizer, DishService, aqui.

62
00:05:25,618 --> 00:05:31,036
Então, com isso, meu DishService agora se torna disponível para o resto do aplicativo.

63
00:05:31,036 --> 00:05:32,186
Agora, como isso acontece?

64
00:05:32,186 --> 00:05:36,948
A dependência injetável do Angular olha para esta informação que

65
00:05:36,948 --> 00:05:41,944
declaramos aqui e, em seguida, decide que precisa criar um DishService e

66
00:05:41,944 --> 00:05:44,382
injeta onde quer que seja necessário.

67
00:05:44,382 --> 00:05:47,092
Agora, como fazemos uso desse serviço?

68
00:05:47,092 --> 00:05:52,674
Vemos que no componente do menu estávamos recebendo

69
00:05:52,674 --> 00:06:00,180
a constante DATES diretamente importando do arquivo de pratos compartilhados aqui.

70
00:06:00,180 --> 00:06:04,681
Agora esta não é a maneira ideal de obter a informação,

71
00:06:04,681 --> 00:06:09,812
em vez de amarrar a informação diretamente em seu componente,

72
00:06:09,812 --> 00:06:14,685
você deve deixar um serviço buscar essa informação para você.

73
00:06:14,685 --> 00:06:19,065
Mais tarde, podemos redesenhar o nosso serviço para poder ir e

74
00:06:19,065 --> 00:06:24,579
buscar as mesmas informações de um servidor back-end, se assim o necessitar.

75
00:06:24,579 --> 00:06:28,396
Na verdade, isso é o que faremos em alguns dos exercícios posteriores.

76
00:06:28,396 --> 00:06:33,384
Então você vai delegar a responsabilidade de buscar as informações para o serviço

77
00:06:33,384 --> 00:06:37,814
e, em seguida, você vai apenas fazer uso do serviço dentro deste componente menu.

78
00:06:37,814 --> 00:06:43,627
Então vamos excluir este componente pratos de lá e

79
00:06:43,627 --> 00:06:48,806
em vez disso vamos importar esse DishService aqui.

80
00:06:48,806 --> 00:06:52,105
E este DishService é importado do arquivo

81
00:06:57,492 --> 00:07:04,140
services/dish.service aqui.

82
00:07:04,140 --> 00:07:09,744
Então, depois de adicionar isso agora fizemos uma parte do trabalho.

83
00:07:09,744 --> 00:07:14,774
Agora precisamos disponibilizar esse serviço para que nosso componente faça uso.

84
00:07:14,774 --> 00:07:18,107
Então é aí que vamos descer para este construtor aqui.

85
00:07:18,107 --> 00:07:19,769
Neste construtor, então

86
00:07:19,769 --> 00:07:23,813
agora você vê o uso do construtor dentro de nossa classe aqui.

87
00:07:23,813 --> 00:07:28,814
Então, neste construtor, veremos

88
00:07:28,814 --> 00:07:35,609
DishService privado e DishService aqui.

89
00:07:35,609 --> 00:07:38,377
Então este é do tipo DishService, então

90
00:07:38,377 --> 00:07:43,914
quando você declara isso no construtor, quando este componente é criado,

91
00:07:43,914 --> 00:07:48,771
então este DishService que você injetou no módulo do aplicativo.

92
00:07:48,771 --> 00:07:52,222
Quando você injetar isso no módulo do aplicativo,

93
00:07:52,222 --> 00:07:56,177
ele criará um único objeto DishService.

94
00:07:56,177 --> 00:08:00,956
E esse objeto DishService será disponibilizado para você dentro do seu componente

95
00:08:00,956 --> 00:08:02,123
menu aqui.

96
00:08:02,123 --> 00:08:09,606
Então agora você pode então recorrer aos métodos que este DishService fornece para

97
00:08:09,606 --> 00:08:13,780
você, a fim de fazer o trabalho em seu nome.

98
00:08:13,780 --> 00:08:15,847
Então, uma vez que você colocar isso lá,

99
00:08:15,847 --> 00:08:20,333
agora nós percebemos que nós não temos mais esta constante de pratos aqui.

100
00:08:20,333 --> 00:08:24,311
Então eu preciso de alguma forma buscar essa informação.

101
00:08:24,311 --> 00:08:29,138
Agora é aqui que eu vou aproveitar o serviço que tenho disponível para mim para

102
00:08:29,138 --> 00:08:31,023
buscar as informações para nós.

103
00:08:31,023 --> 00:08:33,257
Onde obtemos essa informação?

104
00:08:33,257 --> 00:08:38,058
Então, é aqui que vamos ter a ajuda deste método de ciclo de vida chamado

105
00:08:38,058 --> 00:08:38,801
Ngoninit.

106
00:08:38,801 --> 00:08:43,861
Então, quando você declara este método de ciclo de vida chamado NGONinit em seu aplicativo

107
00:08:43,861 --> 00:08:49,561
, então você vê que na classe, você diz implementa o OnInit.

108
00:08:49,561 --> 00:08:54,239
Portanto, a implementação deste OnInit requer que você

109
00:08:54,239 --> 00:08:59,570
implementar este método NGONinit como parte de sua classe aqui.

110
00:08:59,570 --> 00:09:02,461
Assim, dentro deste método NGONinit,

111
00:09:02,461 --> 00:09:07,450
agora você pode pedir ao serviço para buscar essa informação.

112
00:09:07,450 --> 00:09:08,690
Por que é assim?

113
00:09:08,690 --> 00:09:13,560
Este método de ciclo de vida será executado

114
00:09:13,560 --> 00:09:19,040
pela estrutura Angular sempre que este componente for instanciado.

115
00:09:19,040 --> 00:09:23,770
Então, sempre que este componente é criado, este método vai ser executado.

116
00:09:23,770 --> 00:09:30,324
Então, quando esse método é executado, então nesse ponto eu posso ir e

117
00:09:30,324 --> 00:09:34,623
buscar os pratos do DishService.

118
00:09:34,623 --> 00:09:36,839
Então eu posso dizer DishService, e

119
00:09:36,839 --> 00:09:42,700
então você saberá que você tem o método getDishService dentro do DishService.

120
00:09:42,700 --> 00:09:48,105
Você pode invocar sobre o método para buscar os pratos para você.

121
00:09:48,105 --> 00:09:52,511
Agora, quando fazemos isso, então o objeto pratos será fornecido por

122
00:09:52,511 --> 00:09:56,090
o serviço para nós através deste método getDistes.

123
00:09:56,090 --> 00:10:03,829
E isso pode ser colocado em nossos pratos variável local que definimos aqui.

124
00:10:03,829 --> 00:10:08,563
Então, com isso, nós completamos a atualização

125
00:10:08,563 --> 00:10:12,847
para todos os nossos arquivos de aplicativos.

126
00:10:12,847 --> 00:10:18,993
Vamos dar uma olhada rápida no aplicativo Angular resultante.

127
00:10:18,993 --> 00:10:23,507
Mudando para o navegador, agora você pode ver que no navegador o aplicativo Angular

128
00:10:23,507 --> 00:10:26,030
renderiza exatamente como antes.

129
00:10:26,030 --> 00:10:30,342
Nesta versão, como você viu, a informação sobre os pratos

130
00:10:30,342 --> 00:10:34,967
vai ser obtida em seu componente fazendo uso do serviço.

131
00:10:34,967 --> 00:10:38,847
O serviço, por sua vez, vai buscar essas informações para você.

132
00:10:38,847 --> 00:10:41,945
Agora, neste momento, estamos mantendo o serviço muito básico.

133
00:10:41,945 --> 00:10:46,105
O serviço simplesmente retorna esse valor constante que definimos aqui.

134
00:10:46,105 --> 00:10:50,738
Mais tarde, você pode imaginar que você estaria estendendo o serviço para ir e

135
00:10:50,738 --> 00:10:54,042
obter essas informações do servidor back-end.

136
00:10:54,042 --> 00:10:55,428
Quando isso acontece,

137
00:10:55,428 --> 00:11:00,489
a busca de informações não será mais instantaneamente.

138
00:11:00,489 --> 00:11:04,911
É aí que precisaríamos da ajuda de promessas e

139
00:11:04,911 --> 00:11:11,022
também a abordagem JavaScript reativa para suportar esse atraso e

140
00:11:11,022 --> 00:11:17,881
lidar com o atraso na busca das informações dentro de nosso aplicativo.

141
00:11:17,881 --> 00:11:21,699
Falaremos sobre isso com mais detalhes no próximo módulo.

142
00:11:21,699 --> 00:11:26,683
Por enquanto, nosso aplicativo será executado muito bem, então você pode selecionar qualquer um dos

143
00:11:26,683 --> 00:11:32,370
esses pratos e as informações serão exibidas exatamente como antes.

144
00:11:32,370 --> 00:11:38,250
Com isso, competimos neste exercício onde aprendemos as noções básicas de serviços angulares.

145
00:11:38,250 --> 00:11:41,700
E também vimos como podemos fazer uso do serviço Angular,

146
00:11:41,700 --> 00:11:46,118
dentro de nosso componente de aplicativos.

147
00:11:46,118 --> 00:11:51,682
Este é um bom momento para você fazer um commit git com os serviços básicos de mensagem.

148
00:11:51,682 --> 00:11:57,797
[MÚSICA].