[MÚSICA]
Acabamos de criar nossa primeira aplicação Angular no exercício anterior.
Você deve estar se perguntando, como é um aplicativo Angular típico?
Qual é sua estrutura e arquitetura, e
como construir um aplicativo Angular?
Vamos falar sobre essas coisas passo a passo, começando com esta palestra.
Dando uma olhada rápida na pasta do aplicativo, em um editor.
Você percebe imediatamente que o Angular CLI criou um monte de arquivos
em várias pastas em nosso aplicativo.
O que esses arquivos contêm?
Como eles constituem uma aplicação Angular?
Vamos examiná-los passo a passo para entender a arquitetura típica de
um aplicativo Angular.
Como já percebemos,
aplicações angulares são construídas como uma combinação
de HTML e TypeScript ou JavaScript.
Neste curso vamos usar TypeScript como a linguagem de escolha para
construindo nossa aplicação Angular.
Angular em si consiste em várias bibliotecas,
algumas delas chamadas bibliotecas e outras são bibliotecas opcionais.
Dependendo do tipo de aplicativo Angular que você está tentando construir,
você incluirá alguns deles em seu aplicativo.
Como já aprendemos, Angular é um framework JavaScript e
vamos aproveitar isso para construir nosso aplicativo.
Para resumir, a aplicação Angular é modular em sua natureza e consistirá em
vários componentes, juntamente com seus modelos, que compõem a aplicação.
Não só isso, esses componentes, e outras partes do aplicativo Angular,
como serviços, serão organizados em módulos.
E esses módulos, por sua vez, serão usados por módulos de nível superior.
Então você pode olhar para um aplicativo Angular sendo uma arquitetura
modular com um módulo raiz no topo,
que leva a ajuda de outros módulos organizados em sua hierarquia de modelagem.
Vamos examinar nossa aplicação para entender como isso é criado.
Antes de prosseguirmos, o módulo raiz por padrão
em Angular é normalmente chamado de módulo de aplicativo.
Indo para o nosso código, vamos começar nossa jornada e index.html.
Então, neste arquivo index.html, você pode ver que temos o código html típico aqui,
junto com esta linha particular que diz app-root.
Você os reconhece imediatamente, isso não se parece com uma tag HTML típica.
Então vamos começar fazendo a nós mesmos a pergunta, o que isso significa, e
por que isso está incluído na página index.html?
Como já vimos, um aplicativo Angular típico
é uma hierarquia de módulos com um módulo raiz.
Seu aplicativo Angular é inicializado inicializando o módulo raiz
para iniciar seu aplicativo.
Então, como inicializamos um aplicativo Angular?
Nós já vimos a página index.html, e você viu um elemento lá chamado app-root.
Então vamos nos fazer mais algumas perguntas.
Um companheiro para a página index.html é o arquivo main.ts.
Se você abrir esse arquivo, você verá que ele contém um conjunto
de instruções de importação em TypeScript, como escrito aqui.
Não vamos aprofundar muito nos detalhes, mas
Voltarei para explicar isso em pouco tempo.
Mas, em particular,
deixe-me chamar sua atenção para esta linha particular no arquivo main.ts.
Que diz PlatformBrowserDynamic () .BootstrapModule
e, em seguida, anote o parâmetro aqui, que diz (AppModule).
Então, como eu mencionei, anteriormente o módulo de aplicativo é o típico nome
dado ao módulo raiz em um aplicativo Angular.
Se você olhar para a hierarquia de arquivos,
você já verá um arquivo chamado app_module.ts.
Vamos visitar esse arquivo em pouco tempo para ver o que ele contém.
Agora, voltando a essas importações,
você pode ver que vamos tomar o exemplo da primeira importação aqui.
Ele diz importação EnableProdMode de '@angular /core'.
Então o que isso especifica é que vamos importar este módulo
particular da biblioteca do núcleo Angular.
E da mesma forma, você vê o segundo dizendo import PlatformBrowserDynamic
de '@angular /platform-browser-dynamic'.
Então, desta biblioteca você está importando este módulo para o lugar.
Agora, o módulo PlatformBrowserDynamic permite que você inicialize
seu aplicativo Angular tomando seu módulo raiz como um parâmetro.
Obviamente há muitos outros arquivos nesta pasta e nas subpastas lá.
Não vamos nos preocupar muito com eles no momento.
Vamos aprender sobre alguns deles à medida que avançarmos neste curso.
Agora, Angular CLI ajuda a criar essa hierarquia de pastas e arquivos
, com as configurações necessárias para
você para ser capaz de inicializar sua aplicação angular e começar.
Fazer isso à mão é uma tarefa um pouco tediosa.
Então, o Angular CLI simplifica a preparação
da pasta para seu aplicativo Angular.
Então, novamente, indo para o arquivo app_module.ts.
Como eu mencionei, este é o módulo raiz para sua aplicação Angular.
Agora normalmente, o módulo raiz seria nomeado como arquivo app.module,
mas que é apenas um nome sugerido em Angular.
Você verá que muitos dos arquivos que constituem um aplicativo Angular,
há maneiras sugeridas de nomear esses arquivos.
À medida que passarmos pelo curso, aprenderemos especificamente sobre cada um desses arquivos
.
Então, dando uma olhada no conteúdo de app_module.ts,
lá dentro você vê um conjunto de instruções de importação lá.
Dando uma olhada rápida neles, ele diz import {browserModule} de
'@angular -platform-browser'.
Importar {ngModule} de '@angular /core'.
E ngModule é um módulo angular.
Vamos aprender um pouco mais sobre isso um pouco mais tarde.
Além disso, você vê outra instrução de importação aqui,
que diz import {appComponent} from './app.component '.
E dando uma olhada nos arquivos aqui,
você já vê um app.component.tsfileware, e
então vários outros arquivos aqui, incluindo um app.component card.html,
um app.component.acss e outros arquivos.
Agora, esta declaração especifica que este módulo raiz irá incluir este componente,
e irá formar o complemento raiz da sua aplicação Angular.
Um aplicativo Angular típico, como vimos, consiste em um número de módulos
com o módulo raiz como o módulo principal,
que ajuda você a inicializar seu aplicativo Angular.
O módulo raiz é um módulo Angular com um recurso, ou é uma classe.
Então, este é o lugar onde você vê o uso de uma classe TypeScript aqui,
então, se você descer para o módulo vermelho abaixo aqui você verá
esta instrução chamada Export class AppModule.
TypeScript adiciona classes ao seu código JavaScript típico.
Se você está familiarizado com apenas ES-5 JavaScript,
então as classes ainda não foram introduzidas lá, mas
as versões mais recentes do JavaScript irão introduzir suporte para classes.
TypeScript também tem suporte para classes.
Então, se você tem experiência com programação orientada a objetos,
você já está familiarizado com as classes.
Então esse tipo de abordagem está sendo trazido para JavaScript com a introdução
de classes em TypeScript e futuras versões do JavaScript.
Além disso, você notará que esta classe tem
um decorador Ngmodule associado a isso.
Então, um decorador é, novamente, uma função de
que modifica classes JavaScript.
Veremos o uso de decoradores em muitos lugares em nossa aplicação Angular.
Este é um Ngmodule.
O decorador do que permite que você especifique alguns detalhes sobre este módulo de aplicativo
.
Assim, esta função decorador leva um determinado conjunto
de metadados para ajudá-lo a descrever este módulo.
Então este objeto de metadados aqui contém, como você pode ver,
declarações, importações, provedores, bootstrap.
E também conterá exportações se este módulo estiver exportando algo que pode ser
usado por outro módulo.
Como este é o módulo raiz, não temos uma exportação deste módulo.
Então, em vez disso, só temos declarações, importações, provedores e bootstrap.
Então aqui este é bastante direto para entender.
Ele especifica que para inicializar este aplicativo Angular,
precisamos inicializar o AppComponent.
Assim, o AppComponent é o componente raiz da nossa aplicação Angular.
Além disso, a parte de importações especifica as propriedades,
vendo todos esses módulos precisam ser importados para serem usados com este módulo de aplicativo.
Então, este módulo de aplicativo agora depende desses outros módulos.
Então, estes são os módulos que vão ser importados para o módulo de aplicativo como
parte da hierarquia, daí a razão pela qual importamos esses módulos aqui.
Então, quando você importar os módulos,
você está especificando aqui dizendo que o módulo do aplicativo fará uso deste módulo.
Portanto, a propriedade imports especifica os módulos que precisam ser importados ou
os módulos dos quais esse módulo específico é dependente.
As declarações aqui, a propriedade declarations,
é a propriedade que declara as classes view
que pertencem a este módulo particular.
Assim, as classes de visualização no caso de um módulo Angular seria
estar na forma de componentes, diretivas e pipes.
Nós vamos falar sobre diretivas e tubos um pouco mais tarde neste curso,
falaremos sobre componentes na próxima lição.
Os provedores especificam todos os serviços que este módulo
em particular fará uso.
Serviços sobre os quais falaremos um pouco mais detalhadamente em
módulo da próxima semana.
Falaremos mais detalhes sobre serviços, como os criamos,
e como podemos utilizá-los com a nossa aplicação Angular.
Para resumir o que aprendemos até agora, percebemos que um módulo
em um aplicativo Angular pode consistir em um conjunto de componentes e
serviços que serão necessários deste módulo importando-os.
E estes serão declarados usando a propriedade de declarações
do decorador Ngmodule em nosso módulo de aplicativo.
Agora, esses componentes em si podem ser dependentes de
outros componentes, ou serviços, ou diretivas, ou
pipes, como veremos no resto deste curso em particular.
Então, com isso, temos uma idéia aproximada de como uma aplicação Angular típica é estruturada.
Voltando ao nosso código, agora é hora de examinar
este arquivo app.component.ts e o arquivo app.component.html.
Que declara o modelo para o nosso componente,
e o arquivo app.component.ts,
que especifica a parte TypeScript do nosso componente.
Agora, vamos fazer isso na próxima lição, onde vamos lidar com componentes e
como podemos criar novos componentes e adicioná-los à nossa aplicação Angular.
[MÚSICA]