No exercício anterior,
andaime nossa primeira aplicação Angular básica.
Como eu mencionei, vamos trabalhar nesse aplicativo Angular e desenvolvê-lo
ainda mais ao longo do resto deste curso.
Agora, antes de começar a trabalhar em nosso aplicativo Angular,
vamos configurar nosso aplicativo Angular para usar alguns módulos adicionais,
que nos permitem projetar os modelos para nosso aplicativo Angular.
Vamos fazer uso do módulo Material Angular para projetar os layouts de interface do usuário.
O módulo Material Angular nos fornece uma série de componentes de layout interessantes
que podemos fazer uso na concepção de nossos modelos de componentes angulares.
Além disso, faremos uso do layout flexível que é baseado no layout flexível CSS,
que nos permite fazer design responsivo dentro da nossa aplicação Angular.
Então, neste exercício,
vamos fazer essas configurações.
Ao longo do caminho, aprenderemos nosso primeiro breve conhecimento de componentes,
mesmo antes de examinarmos os componentes com mais detalhes na próxima lição.
Para começar, vamos começar nossa jornada com uma rápida visita ao arquivo app.component.ts.
Este é o arquivo que suporta
o componente raiz que faz parte da nossa aplicação Angular.
Agora, dando uma olhada neste componente raiz,
há algumas coisas que se tornarão muito claras para você, mesmo sem muita explicação.
A primeira coisa que eu gostaria de chamar sua atenção para esta declaração de importação.
Como você pode ver, isso é importar a classe de componente da biblioteca de núcleo Angular.
Em seguida, estamos preparando nossa classe AppComponent aqui,
e exportando essa classe.
Então, dentro desta classe AppComponent que declaramos,
temos uma variável que declaramos aqui chamado título,
que está atualmente atribuído a ser uma string.
Agora, dando uma olhada rápida nesta variável,
você imediatamente começa a se perguntar,
como isso está relacionado com o que vimos no navegador,
quando você viu nosso aplicativo Angular sendo mostrado no navegador,
o aplicativo Angular estava exibindo exatamente essas palavras no navegador.
Na verdade, essa variável desempenha um papel importante em
chegando com a visão que você viu em nosso navegador.
Agora, além disso, você também vê que
esta classe componente é anexada com um decorador aqui.
Então, novamente, este é outro decorador que você encontrará em Angular.
Então, isso como vemos é um decorador componente.
O decorador do componente toma internamente um objeto JavaScript como um parâmetro aqui,
e a primeira propriedade que você vê aqui chamada selector: app-root.
Agora, se você se lembra quando olhamos para o arquivo Index.html,
vimos que incluímos um elemento chamado app-root.
Agora, você começa a ver de onde surge essa raiz de aplicativo.
Então, este é o seletor para o componente que declaramos aqui,
que é o que é usado dentro de nossa classe template para especificar onde
a exibição correspondente a este componente deve ser exibida no navegador.
A segunda propriedade que você define aqui é o TemplateURL.
Isso aponta para um arquivo,
um arquivo HTML como você pode ver,
que contém o modelo correspondente a este componente específico.
O modelo que define a vista para este componente.
A terceira propriedade que você define aqui como você pode ver, diz, styleURLs,
que como você percebe aqui é atribuída ao arquivo app.component.scss.
Então, este arquivo deve conter todo o código scss que pode ser
usado para estilo CSS para o nosso modelo de componentes.
Então, esta é uma visita rápida ao arquivo app.component.ts.
Agora, vamos para o arquivo App.component.html,
e dar uma olhada rápida no modelo.
Vá para o arquivo App.component.html,
você vê que este arquivo app.component,
o código HTML aqui contém apenas uma tag h1 com algo aqui com chaves duplas.
Agora, obviamente, isso não é algo que você está acostumado a partir do seu conhecimento de HTML,
ou CSS ou JavaScript que você já viu antes.
Esta é a sintaxe angular.
Isto é o que chamamos de interpolação.
Isso está usando a ligação de dados unidirecional do Angular.
Estou jogando alguns termos em você neste momento.
Segure estes termos, voltaremos a analisar esses termos em
mais detalhes nas lições restantes deste curso.
A primeira coisa como mencionei é a interpolação,
a segunda que mencionei é a ligação de dados unidirecional.
Além disso, você verá imediatamente que esta é a variável que você viu no arquivo companheiro,
TypeScript, que define o código TypeScript correspondente ao componente App.
Então, uma vez que você especificar algo como isso aqui,
a implicação é que qualquer que seja o valor para este título será substituído no lugar
aqui e será usado como o código HTML interno para esta tag h1 aqui.
Esse é o propósito de incluir isso aqui.
Vamos agora instalar alguns dos
os outros módulos de relação Angular que nos permitirá projetar modelos.
Então vamos voltar para este arquivo App.component.html.
Em seguida, redesenhe este modelo um pouco mais tarde neste exercício.
Para nos ajudar a projetar visualizações responsivas dentro da nossa aplicação Angular,
nós vamos ter a ajuda de um par de
módulos relacionados para Angular chamado como o módulo Material Angular.
O módulo Material Angular nos fornece uma série de componentes.
Componentes de layout que podemos usar na concepção
nossos novos modelos para nossos componentes angulares.
O módulo Material Angular se você quiser comparar isso é um pouco parecido com o que Bootstrap
nos forneceu para projetar nossas páginas web que examinamos no curso anterior.
Além disso, vou usar outro módulo chamado como o módulo de layout flexível Angular.
O módulo de layout flexível fornece suporte para o uso de layout flexível CSS
dentro de nossos modelos angulares para nossos componentes angulares.
Agora, esses dois módulos precisam ser explicitamente
instalados e, em seguida, importados para nosso aplicativo Angular,
é o que vamos fazer na próxima etapa.
Mas antes de avançarmos,
uma pergunta que você pode estar se perguntando é,
por que não usar o Bootstrap para fazer o design dos modelos para a nossa aplicação Angular?
Na verdade, você também pode usar o Bootstrap para projetar os modelos para a nossa aplicação Angular.
Mas você só pode usar
a parte de componentes CSS do Bootstrap dentro do seu aplicativo Angular.
Os componentes baseados em jQuery.
Os componentes JavaScript não podem ser usados explicitamente, pode haver alguns conflitos
entre os componentes baseados em jQuery do Bootstrap e o próprio código Angular.
Então, é melhor evitar usar os componentes JavaScript do Bootstrap
caso você opte por usar o Bootstrap como a forma de projetar seus modelos angulares.
Mas, por outro lado,
Eu também pensei que isso nos daria uma boa oportunidade de aprender obter
outra estrutura de layout UI que é a estrutura de material Angular.
Então, essa é a razão pela qual eu escolhi usar o quadro de material angular
e o layout flexível angular neste curso em particular.
Agora, à medida que passamos pelo resto deste curso,
Eu não vou explicar explicitamente como usar
os componentes de Material Angular ou como usar o Layout Flexível Angular.
Em vez disso, vamos aprendê-los olhando para exemplos.
Nós faremos uso desses dois,
tanto os melhores componentes de Material Angular quanto o suporte Angular Flex-Layout,
quando projetarmos nossos modelos para nossos componentes Angulares neste curso específico.
Então, pelo processo de fazer uso desses componentes,
você também vai ao longo do caminho,
aprender a fazer uso de ambos Angular Material e
Angular Flex-Layout dentro de sua aplicação Angular.
Eu pensei que ao fazer os exercícios,
você aprenderia muito mais sobre Material Angular.
Agora, para explicar os aspectos conceituais de por que
componentes de Material Angular funcionam da maneira que eles fazem ou como Grid funciona, por exemplo,
ou como um design responsivo funciona,
nós já examinamos alguns desses no curso anterior sobre Bootstrap.
Assim, os mesmos conceitos também virão em nosso auxílio.
Em vez disso, analisaremos a mecânica de usar tanto Material Angular quanto
o Layout Flexível Angular dentro da nossa aplicação Angular neste curso específico.
Para começar a usar um Material Angular,
é claro que a primeira coisa que você precisa fazer é instalar o módulo Material Angular.
Então, no prompt digite npm install —save @angular /material.
Então, como você pode ver,
nós especificamos todos os módulos relacionados Angular com o @angular,
então você verá também a mesma coisa para o Flex-Layout.
Estamos instalando a versão 6.4.7 do módulo Material Angular.
Além disso, o módulo de material requer a instalação do CDK.
Então, também vamos instalar isso fazendo
npm install @angular /cdk @6 .4.7 —save,
e instalá-lo junto com Angular Material.
Então, Angular Material faz uso do CDK Angular para seus componentes.
Além disso, quando você estiver usando Material Angular,
você também precisa importar o módulo de animações Angulares para seu aplicativo Angular.
Começando com a versão Angular quatro,
o suporte de animação Angular foi extraído
fora dos módulos principais em seu próprio módulo separado.
Então, o que significa que se você precisar
fazer uso de animações dentro de seu aplicativo Angular,
você precisa instalar explicitamente o módulo de animações Angulares.
Então, vamos em frente e instalar isso também.
Então, você dirá
npm install —save @angular /animations @6 .1.7.
Além disso, outro módulo que vou instalar
juntos é chamado HammerJS.
O módulo HammerJS é usado por Angular
para suportar alguns gestos dentro da sua aplicação Angular.
Então, essa é a razão pela qual instalamos HammerJS também dentro da nossa aplicação,
e a versão atual do HammerJS que estamos usando é 2.0.8.
Agora, nós instalamos o que precisamos
para o módulo de material angular a ser usado dentro da nossa aplicação Angular.
Em seguida, vou passar para instalar
o Angular Flex-Layout dentro do meu aplicativo Angular.
Então, para fazer isso, eu coloco o prompt
npm install —save @angular/flex-layout
e vamos instalar a versão mais recente disso.
Então, agora que temos todas as peças que precisamos para nosso aplicativo Angular instalado,
vamos em frente e depois configurar nosso aplicativo Angular para fazer
uso desses novos módulos que instalamos em nosso aplicativo Angular.
A primeira coisa que vamos fazer é ir para o arquivo Index.html,
e, em seguida, vamos configurar o arquivo Index.html para usar os ícones Material Angular.
Então, para incluir os ícones de Material Angular para que eles possam ser
usados dentro dos modelos de seu aplicativo Angular, então,
deixe-me ir lá na cabeça de Index.html,
e, em seguida, criar um novo link com
href=” https://fonts.googleapis.com/icon?family=Material+Icons "e este é um folha de estilo.
Então, com isso, agora eu posso fazer uso dos ícones de Material Angular dentro
meu aplicativo Angular onde eu escolher para fazê-lo dentro dos templates.
O próximo passo é ir para o app module.ts e
, em seguida, importar os três módulos que acabamos de instalar.
Então, o primeiro que eu vou importar é chamado como
o BrowserAnimationsModule que eu vou importar de
@angular /platform-browser/animations. Então, agora o próximo
que eu vou importar é o MaterialToolbarModule.
Então, isso importa o @angular /material/toolbar module
que pode ser usado dentro de nossos modelos de aplicativos angulares.
Então, Angular Material, e também importar
o FlexLayoutModule de @angular /flex-layout.
Então, uma vez que temos todos esses módulos importados, em seguida, uma mudança adicional que eu preciso
fazer é- oh deixe-me também importar Hammer.js enquanto eu estou lá.
Então, deixe-me importar
Hammer.js para o meu aplicativo.
E uma vez que eu estou nisso,
a outra mudança que eu preciso fazer é também incluir
esses módulos nas entradas do decorador do módulo NG aqui.
Então, eu vou ir lá e dizer módulo de navegador,
módulo de animações do navegador lá e depois do módulo HTTP,
Eu vou importar o módulo de barra de ferramentas de material e também o módulo de layout flex
como parte das entradas dentro do decorador do módulo NG para o meu módulo de aplicativo.
Então, com isso todas as minhas configurações para usar o módulo de barra de ferramentas de material e
o módulo de layout flexível angular e junto com
o módulo de animações em angular é concluído.
Agora vamos entrar no modelo de componentes e fazer uso de
nosso primeiro componente de material angular na concepção do layout
para o nosso componente aplicativo de aplicativos.
Indo para o arquivo de modelo de componentes do aplicativo,
Eu vou substituir isso agora com
um componente de material angular
chamado como mat-toolbar.
Então, a barra de ferramentas mat-me permite projetar
uma barra de ferramentas que eu possa usar na minha aplicação angular.
Barra de ferramentas normalmente exibida na parte superior da página dentro do aplicativo.
Então, para esta barra de ferramentas vou especificar a cor como primária.
Vamos ver o que isso significa em pouco tempo.
E também vamos fechar esta barra de ferramentas MD aqui.
Agora dentro disso eu vou usar um span com
o nome do meu restaurante para o qual eu estou projetando este site.
Então, Ristorante Confusão.
Agora você vê por que eu nomeei esta pasta como Confusão.
Então, qual é a atualização que precisamos fazer para o arquivo HTML do componente aplicativo.
Enquanto estamos nisso, também incluiremos algumas atualizações SCSS para meu arquivo Styles.scss.
Então, se você entrar em seu código aqui,
você vai encontrar este arquivo Styles.scss aqui.
Então, este é o lugar onde você pode incluir todos os estilos globais em
este arquivo e isso estará disponível para todos os componentes para fazer uso de.
Cada componente tem seus próprios arquivos SCSS onde você pode incluir componentePersonalização de nível
ou código SCSS de nível
do componente a ser usado dentro desse componente específico.
Usaremos ambas as abordagens dentro
esta aplicação angular que estamos desenvolvendo neste curso.
Mas agora eu vou atualizar o arquivo principal styles.scss
com algum código que será útil para toda a minha aplicação angular.
A primeira coisa que eu vou fazer,
é importar um tema pré-construído que está disponível através de material angular.
Este tema pré-construído em material angular nos fornece uma maneira de especificar
certas cores e a forma como algumas coisas são colocadas
dentro dos meus componentes angulares de material.
As cores que estarão disponíveis através do quadro pré-construído nossa cor primária,
a cor de destaque e a cor de aviso.
Agora, o tema específico que vou usar é chamado Deep Purple.
Então, neste caso, a cor primária será roxo profundo.
A cor de destaque será âmbar e a cor de aviso será vermelha neste caso.
Agora você pode construir seus próprios temas materiais angulares que
você pode usar dentro de seu aplicativo, mas eu vou
deixar isso como um exercício para você explorar por conta própria.
Agora mesmo dentro da minha aplicação angular eu vou usar um
das coisas pré-construídas chamadas âmbar roxo profundo.
Então, para fazer isso indo para o arquivo Styles.scss,
eu vou importar
material angular
pré-construído temas profundamente roxo âmbar. css.
Então, este tema pré-construído eu vou fazer uso de dentro da minha aplicação angular.
Você vai ver em breve como este tema pré-construído funciona em
a aplicação angular nos modelos que projetamos para a nossa aplicação angular.
Além disso, eu vou configurar algumas propriedades para
meu corpo da página index.html para que eu vou especificar o preenchimento como zero,
margem como zero, e, em seguida, a família de fontes que eu vou
usar é rubato ou sans serif dentro da minha aplicação.
Você pode optar por usar o que quiser dentro de suas aplicações angulares.
Eu selecionei para usar esses dois dentro da minha aplicação angular.
Vamos salvar as alterações,
e vamos dar uma olhada rápida no nosso aplicativo angular no navegador.
Antes de fazer isso,
certifique-se de que o serviço NG está sendo executado em
uma das janelas de terminal do computador.
O servidor de desenvolvimento deve ser executado continuamente para que ele faça automaticamente a descompilação
e, em seguida, carregue
a versão atualizada do aplicativo angular na janela do navegador.
Indo para o navegador,
agora você vê as mudanças que fizemos para
a aplicação angular refletida na visão em
meu navegador para que você possa ver que agora temos uma barra de ferramentas no topo com
as palavras que incluímos no arquivo de modelo de componentes do aplicativo lá.
E você pode ver a cor que foi aplicada à barra de ferramentas.
Então, a cor, a cor primária,
então esta é a cor roxa profunda que é aplicada à barra de ferramentas.
Agora, o tema que definimos irá irá adicionar cor roxa profunda ou âmbar,
dependendo do que é usado pelos componentes de material angular específicos
que usamos dentro de nossos modelos de aplicações angulares.
Com isso, completamos este exercício.
Neste exercício, configuramos nossa aplicação angular para fazer
uso do material angular e do layout flexível angular.
Também usamos
nosso primeiro componente de material angular no arquivo de modelo de componentes do aplicativo.
E usamos o tema embutido de material angular para nossa aplicação angular.
Salve todas as alterações e, em seguida, este é um bom momento para você
fazer um commit git com a mensagem configurando angular.