Agora vamos passar para
nosso próximo exercício onde vamos criar
um novo componente e adicioná-lo à nossa aplicação Angular.
Em seguida, vamos fazer uso desse componente para controlar uma parte
da tela que nós projetamos para a nossa aplicação Angular.
A tela para a nossa aplicação Angular é muito chata no momento.
Tudo o que temos é uma barra de ferramentas no topo e, em seguida, uma tela branca
aqui, mas isso também nos dá ideias.
Agora podemos pegar conteúdo adicional e, em seguida,
colocar isso nesta parte da tela aqui. Como fazemos isso?
Podemos criar um novo componente e, em seguida, entregar
sobre esta parte da tela para esse componente e dizer,
“Você cuida de renderizar o que quiser nessa parte da tela.”
Então, essa visão será controlada pelo novo componente.
Como fazemos isso? Vamos passar pelo exercício agora.
Para começar o exercício,
vá para as instruções de exercício que seguem este vídeo em particular.
Em seguida, nas instruções de exercício,
você verá alguns recursos de exercício,
que é um arquivo zip disponível para você.
Baixe esse arquivo zip para o seu computador,
e isso lhe dará um arquivos.zip images.zip.
Então, basta salvá-lo como images.zip arquivo em sua pasta de downloads,
descompactá-lo, e então isso lhe dará
uma pasta de imagens contendo
um conjunto de imagens que vamos fazer uso em nosso aplicativo.
Descompacte o arquivo images.zip que você acabou de baixar,
e mova esse arquivo images.zip para o seu projeto,
e dentro do seu projeto,
para a pasta de fontes e ativos aqui.
Então, novamente, mova a pasta de imagens que você obtém por
descompactando o arquivo images.zip e, em seguida, mova essa pasta de imagens para seu aplicativo,
assim, dentro de seu aplicativo,
sob fontes e ativos subpasta.
Estas imagens que são fornecidas aqui estarão
disponíveis para uso dentro da sua aplicação Angular.
Agora, vamos fazer uso do Angular CLI para
gerar automaticamente um componente para nós e adicioná-lo ao nosso aplicativo Angular.
Então, no terminal,
ir para a pasta que contém seu aplicativo Angular e digite
ng gerar menu componente.
Então, vamos nomear este componente como o MenuComponent.
Este menuComponent conterá o menu para
o restaurante para o qual estamos preparando nosso aplicativo Angular.
Então, quando você digitar isso,
isso irá gerar automaticamente
o menuComponent e, em seguida, adicioná-lo ao seu aplicativo Angular.
Este menuComponent será criado e adicionado em
a pasta fonte/app/menu do seu aplicativo.
Então, ele irá criar um conjunto de arquivos na pasta do menu.
Então, você pode ver que ele cria um arquivo SCSS,
um arquivo HTML, e o arquivo ts,
e então algo chamado arquivo ts espectral.
Voltaremos a isso mais tarde.
Em seguida, também, ele atualizará o arquivo module.ts do aplicativo.
Então, vamos dar uma olhada no que acabou de acontecer quando você
criou este menuComponent e o adicionou ao seu aplicativo Angular.
Vamos ao Editor.
Chegando ao nosso Editor,
você agora vai notar que,
na pasta do aplicativo,
há uma nova pasta chamada menu lá,
e esta pasta de menu contém todos os arquivos relacionados MenuComponent aqui.
A Angular CLI segue o guia de estilo padrão Angular.
O guia de estilos sugere que cada componente deve ser colocado
em sua própria pasta como são vistos aqui,
e eu praticamente gosto disso porque eu sou muito obsessivo sobre
mantê-lo limpo hierarquia para minhas pastas de aplicativos aqui.
Então, isso funciona muito bem para mim.
Algumas pessoas gostam de uma hierarquia plana,
mas eu só fico confuso com essa parte.
Então, eu prefiro armazenar cada componente em sua própria pasta.
Então, funciona bem para mim.
Agora, se você abrir o arquivo app module.ts,
você notará que o arquivo app module.ts foi atualizado
incluindo outra importação para o arquivo app module.ts.
Então, você vê que, juntamente com o AppComponent,
o menuComponent foi adicionado automaticamente como uma importação para o módulo do aplicativo.
Então, isso significa que o MenuComponent está agora
disponível para o seu aplicativo Angular a ser usado.
Além disso, se você verificar a propriedade declarations dentro do decorador ngModule,
você verá que na propriedade declarations,
além do AppComponent,
você também tem o menuComponent incluído.
Esta é a razão pela qual eu amo Angular CLI,
porque simplifica tudo isso funcionou para mim.
Se eu fosse fazê-lo à mão,
Eu vou ter que ir manualmente para o app module.ts e, em seguida, digitar todo esse código lá,
e há uma alta probabilidade de que eu acabe cometendo erros lá.
Então, estamos economizando muitos problemas usando o Angular CLI.
Então, é por isso que eu me apaixonei por
Angular CLI para criar meus aplicativos Angular.
Então, com isso, nós configuramos
nosso menuComponent para estar disponível para nossa aplicação Angular.
Agora, onde vou fazer uso do menuComponent?
Vou fazer uso do menuComponent dentro do meu modelo AppComponents.
Então, eu vou para o modelo AppComponents e, em seguida,
incluir o menuComponent aqui no meu AppComponent.
Então, isso vai essencialmente passar essa parte da tela para meu menuComponent.
Como fazemos isso?
Para fazer isso, primeiro vamos dar uma olhada rápida no arquivo MenuComponent.ts.
Então, quando você abrir o arquivo MenuComponent.ts,
você verá que o seletor para o MenuComponent foi definido como app-menu.
Então, este é o nome do seletor padrão que o Angular CLI fornece para seus componentes.
Você pode alterar isso se quiser,
mas qualquer seletor que você especificar aqui,
que formaria as tags que você usa para incluí-lo em seu arquivo de modelo.
Então, voltando para AppComponent.html,
agora, se eu quiser incluir o arquivo de menu aqui,
então eu vou apenas dizer,
app menu tag e voila,
que parte da tela agora é entregue ao meu menuComponent,
e cabe ao menuComponent decidir o que ele quer colocar lá.
Então, seja o que for definido,
o modelo MenuComponents será colocado no lugar aqui.
Então, agora, tudo o que nos resta é ir e preparar
nosso menuComponent para mostrar as informações apropriadas para nós.
Vamos salvar as alterações,
e, em seguida, vamos mudar para
o próximo passo onde vamos criar o menu para o nosso restaurante usando o MenuComponent.
Antes de fazer isso,
o que eu vou fazer é,
ir para a pasta do aplicativo aqui,
e depois na pasta do aplicativo,
Eu vou criar uma nova subpasta e nomeá-la como subpasta compartilhada.
Agora, todos os arquivos que eu vou compartilhar em vários componentes,
Eu vou colocá-lo na pasta compartilhada aqui.
Agora, dentro da pasta compartilhada,
Vou criar um novo arquivo chamado dish.ts.
Dentro deste prato.ts, eu vou criar uma classe para definir
um prato e torná-lo disponível para os componentes restantes para usar.
Então, para definir uma classe TypeScript aqui,
Eu vou dizer exportação,
então eu estou exportando esta classe TypeScript aqui,
classe de exportação, e então eu vou nomear a classe como prato.
Dentro desta classe de prato,
Agora posso definir várias propriedades.
Então, para a classe dish,
eu vou definir uma propriedade,
que é um ID, que eu defino como uma string.
Agora, observe, se você está vindo do mundo JavaScript,
em JavaScript, você não precisa especificar o tipo de qualquer variável.
TypeScript traz este recurso para você especificar o tipo para cada variável.
Então, se você especificar nome, coluna e string,
isso significa que a variável de nome será sempre do tipo string.
Então, se você tentar atribuir um inteiro para o nome,
então compilador TypeScript irá automaticamente
pegar isso para você e, em seguida, dizer-lhe que há um erro.
Essa é a razão, usando TypeScript,
você pode reduzir o número de erros que você pode causar.
JavaScript tradicionalmente não faz essa verificação de erro
porque ele não tem nenhum conceito de tipos de dados.
Mas se você está vindo de uma linguagem de programação tradicional como C++ ou Java,
você está muito familiarizado com os tipos de dados,
os tipos de dados primitivos e
outros tipos de tipos de dados que já estão definidos na linguagem.
TypeScript traz esse recurso para JavaScript ou melhor, como parte de TypeScript,
e que permite definir variáveis e anexar tipos a essas variáveis,
daí o nome TypeScript.
Então, para o prato,
Eu vou criar uma propriedade de nome.
Então eu vou criar uma propriedade de imagem,
que também é uma string.
Esta string de imagem será uma string que aponta para
a URL da imagem que eu vou usar para este prato em particular.
Então eu vou definir uma categoria para este prato como também outra string destaque como Booleano,
rótulo como uma string.
Preço como uma string e, em seguida, descrição como uma string.
Então, estas são propriedades que eu associo com a classe de prato.
Então, isso vai definir vários pratos no meu menu do meu restaurante,
e para cada prato eu preciso especificar todas essas várias propriedades.
Agora, por que eu precisaria disso?
Isso vai me ajudar a construir o menu para o meu restaurante como você vai ver muito em breve.
Então, com isso, completamos a definição da minha classe lá.
Vamos salvar as alterações no arquivo dish.ts.
Agora, este arquivo dish.ts está exportando uma classe.
Agora, eu posso importar essa classe para qualquer um dos
os arquivos de script do tipo de componente do meu aplicativo.
Em seguida, vou mudar para o meu arquivo menu.component.ts.
Dentro do arquivo menu.component.ts, além de importar o componente,
Eu também verei que você está importando um OnInit lá.
Chegaremos à parte OnInit em um dos exercícios posteriores.
Eu vou explicar o que isso faz em um exercício posterior.
Nós também importaremos a nova classe que criamos chamada classe Dish.
Por que importamos esta classe de prato?
Para que possamos usar isso como um tipo para uma variável que estou definindo aqui.
Então, onde é essa aula de prato?
Está em../shared/dish pasta.
Então, isso está na pasta de prato compartilhado acima lá.
Então você verá que definimos o componente de menu aqui.
Então, você pode ver que ele diz,
“Exportar componente de menu de classe” e, em seguida, ele diz, “Implementar nele”.
Nós vamos voltar a isso em um pouco mais tarde.
Você também vê que há um construtor e há mais um método aqui chamado NGUnit.
Vamos usá-los em alguns dos exercícios posteriores.
Então, vamos deixá-lo lá como tal e vamos
voltar a entender o que é em pouco tempo.
Além disso, observe que para este componente,
o modelo é definido no ponto de componente de menu HTML,
e os URLs de estilo definidos lá.
Agora, além disso, na minha classe componente de menu,
Eu vou incluir uma nova variável chamada como
pratos que seria uma matriz do tipo de prato.
Ok? Então eu vou simplesmente incluir o conjunto de pratos
na minha variável pratos que eu defini aqui.
Agora, para digitar toda a coisa à mão vai levar muito tempo.
Então, em vez disso, o que eu sugiro para você fazer é apenas ir e copiar
o conteúdo diretamente das instruções que seguem este vídeo.
Então, isso é o que eu vou fazer.
Então volte e cole isso aqui.
Agora você pode ver que eu cortei e colado a informação para
todos os meus pratos a partir das instruções aqui.
Então, isso completa a matriz de todos os pratos que são definidos nas minhas instruções.
Então, essa é a maneira mais fácil de obter essas informações.
Então, basta cortar e colar de lá.
Agora, observe que para este prato,
cada um deles é um objeto JavaScript aqui.
Então, que pode ser mapeado para a classe de script de tipo correspondente lá.
Então, você pode ver que cada objeto JavaScript tem propriedades lá,
e essas propriedades correspondem exatamente às propriedades que eu defini para minha classe dish.
Então, uma vez que eu definir isso,
então esses pratos agora se tornarão uma variedade de pratos
e isso agora ficará disponível para
me usar quando eu definir meu modelo HTML para o meu menu.
Vamos salvar as alterações que fizemos até agora e então vamos
abrir o arquivo menu.component.html.
Então, vamos para o arquivo menu.component.html.
Você verá que no arquivo menu.component.html,
você atualmente tem apenas um P com menu funciona aqui.
Então, se você simplesmente colado lá e, em seguida, ver o aplicativo funcionando,
você teria visto apenas este menu funciona na tela.
Eu vou substituir isso pelo meu próprio código de modelo aqui.
Este é o lugar onde eu vou pegar a ajuda do layout flexível angular para me ajudar
a colocar meu conteúdo bem na minha tela.
Então, para começar,
Vou começar com um div,
ao qual vou aplicar uma classe chamada container.
Vou definir a classe de contêiner usando
algum código CSS um pouco mais tarde neste exercício.
Então, vou aplicar o recipiente de classe aqui.
Eu também vou definir uma propriedade chamada fxlayout.
Um atributo chamado fxlayout.
Agora, este fxlayout é um atributo
que o layout flexível angular me permite aplicar a um div.
Especifica se os vários conteúdos
que incluo dentro dessas div devem ser dispostos horizontalmente ou verticalmente.
Então, eu vou especificar isso para ser uma coluna.
Então, qualquer conteúdo que eu incluir dentro deste div,
será colocado verticalmente um abaixo do outro na minha tela.
Se você já viu a maneira grade de trabalhar com conteúdo no Bootstrap,
você veria que isso essencialmente me diz que eu estou indo para
colocar tudo em uma única coluna lá embaixo.
Não confunda esta coluna com a coluna do Bootstrap da grade do Bootstrap.
São duas coisas diferentes.
Aqui, o atributo é fxlayout e eu especifico coluna.
Eu também posso especificar isso como linha,
o que significa que o conteúdo será colocado horizontalmente.
Agora também, mais um atributo que eu vou especificar para isso é fxLayoutGap,
que vou especificar como 10 pixels.
Então, o que isso significa é que qualquer conteúdo que eu incluir aqui
será separado um do outro por intervalo de 10 pixels entre cada um deles.
A partir do conhecimento de Bootstraps, você vê o que é um ponto de corte aqui.
Isso define uma separação de corte entre
duas partes de conteúdo no meu modelo de aplicativo.
Então, com isso, vamos fechar o div aqui.
Agora, dentro desta div,
Eu vou definir o conteúdo real que irá para o meu arquivo menu.component.html.
Agora aqui, eu vou fazer uso de outro componente que
material design fornece para mim chamado como um componente de lista de tapete.
Então, este componente permite-me criar uma lista de
itens que incluo no meu modelo aqui.
Então, este é um componente de lista de materiais angular.
Do Bootstrap, você percebe que no Bootstrap tínhamos o objeto de mídia.
Então, a lista de esteiras é como o objeto de mídia em algum sentido do Bootstrap.
Agora, vou aplicar uma classe,
um atributo chamado como FxFlex.
Agora, o que isso significa é que tudo isso será tratado como uma unidade ou um pedaço de conteúdo
que eles serão definidos pelo meu layout flexível aqui.
Então, se você estiver familiarizado com o layout flexível CSS.
Então, este é um pedaço de conteúdo que será apresentado pelo meu layout flexível CSS.
Então, aplique FxFlex aqui,
e, em seguida, dentro aqui vou definir mat-list-item.
Então, este é um item de lista aqui.
Então, a partir do seu conhecimento HTML,
se a tag LI que você usa em HTML é semelhante a esta aqui.
Então, este é um item de lista mg aqui.
Então, obviamente, dentro deste item da lista,
você vai estar definindo a lista de coisas.
Agora, angular fornece algumas diretivas estruturais que você pode aplicar
para suas tags aqui que permite que você crie seu conteúdo.
Agora, eu vou usar uma diretiva estrutural chamada ngFor.
Vamos ver como usá-lo neste modelo.
Então, mais tarde, após este exercício,
Vou explicar brevemente para vocês quais são as diretivas estruturais e
qual o propósito que servem na definição de seus modelos aqui.
Então, dentro deste item de lista vazia, eu vou dizer,
estrela, anote a sintaxe, estrela NgFor.
Então, esta é a directiva estrutural,
a NGpara a directiva estrutural em angular.
O que esta diretiva estrutural NGFor permite que você faça é
para iterar sobre uma matriz de itens.
Lembre-se que nós definimos pratos como uma matriz de objetos de prato em nosso código.
Agora, no meu modelo,
Eu vou ter acesso a esse objeto pratos.
Então aqui, se eu quiser iterar sobre ele,
da maneira que eu especifico é eu vou dizer,
“Deixe prato de pratos.”
É assim que a sintaxe funciona para a diretiva estrutural NGFor.
Então, deixe prato de pratos.
O que isso significa é que os pratos são a matriz de objetos de prato.
Quando selecionamos dizer deixe prato de pratos,
isso me permitirá acessar cada elemento de
a matriz e, em seguida, ele me ajuda a iterar sobre a matriz.
Isto é como um loop for,
se você estiver familiarizado com loops de programação.
Então, isso age como um loop for para você e, em seguida, ele ajuda você a iterar
sobre todos os elementos da matriz de pratos aqui.
Este prato se torna um objeto JavaScript que me permite
acessar cada elemento dessa matriz lá.
Agora, a partir disso, também podemos agora obter acesso
às propriedades de cada objeto individual dentro da minha matriz de pratos.
Então, então, eu posso fazer uso deles para definir meu modelo aqui.
Deixe-me colocar o modelo e, em seguida, vamos voltar e
olhar como esses dois estão inter-relacionados aqui.
Agora, dentro da minha lista vazia item,
eu posso incluir uma imagem com o atributo como MatlistAvatar.
Então, isso me permite incluir uma imagem e, em seguida, com a fonte sendo especificada aqui.
Agora, curiosamente, olhe para a sintaxe que estou usando aqui.
Dentro de aparelhos duplos, eu vou dizer dish.image.
O que isso significa é que esta é uma interpolação unidirecional de que estamos falando.
Aqui, quando eu especificar isso,
o que isso significa é que esta fonte vai obter o valor de dish.image que definiu em
meu objeto JavaScript que eu defini em
minha classe de script de tipo lá e que está disponível para mim para fazer o layout aqui.
Assim, que o valor dish.image estará disponível para mim e também para esta imagem,
vou especificar um valor alternativo como dish.name.
Lembre-se que o meu prato também tinha a propriedade nome disponível para
me para que define uma imagem para a minha lista aqui.
Você vai muito em breve perceber como esta lista parece em
a tela quando concluímos este modelo aqui.
Além disso, eu vou usar um h1 com tag MatLine.
Novamente, este é o uso de
o componente material angular lista para definir meu modelo aqui.
Então, eu digo h1 MatLine então isso me ajuda a definir uma linha aqui e depois lá dentro,
Eu vou usar o aparelho duplo e dizer dish.name aqui.
Então, isso me permite obter o valor do nome do prato lá.
Então, que define uma linha e, em seguida, o na próxima linha eu vou dizer p MatLine.
Então, eu vou usar a tag p aqui e, em seguida, fechar
fora da tag p e, em seguida, dentro da tag p,
Eu vou usar um span para definir dish.description.
Então, se você está familiarizado com objetos JavaScript,
você agora vê como eu estou acessando as propriedades do
meu objeto JavaScript aqui, dish.description aqui.
Por nota, rodando por isso mais uma vez
o atributo ngFor me permite iterar sobre uma matriz de objetos aqui.
Então, pratos aqui é uma variedade de objetos de prato.
Então, quando eu digo deixar prato de pratos,
este prato vai me dar acesso a cada elemento de
minha matriz de pratos e eu iterar sobre cada elemento da matriz
e então eu vou estar criando este conteúdo para cada um deles.
Então, este item de lista vazia,
essencialmente age como um loop for de
sua linguagem de computador tradicional e, em seguida, ele itera sobre
a lista de pratos e, em seguida, apresenta cada um deles na minha tela.
Então, com essa mudança,
vamos salvar o arquivo componente do menu.
Em seguida, vamos para o app.module.ts e precisamos importar o módulo MATList para isso.
Então, dizemos, importar MatlistModule
de Angular/material/list.Uma vez que temos importado isso lá,
então vamos para baixo e, em seguida, atualizar as importações em
o decorador módulo Ng e adicionar em
o módulo MatList para a lista de importações lá.
Este meu aplicativo module.ts agora é atualizado e, em seguida, também,
Eu vou para o arquivo styles.scss e, em seguida, adicionar
na classe recipiente aqui.
O que a classe de contêiner define aqui?
A classe de contêiner é a margem 20 pixels
e exibir flex e salvar as alterações.
Agora, vamos dar uma olhada na nossa página web.
Indo para a nossa página web.
Voilá. Lá vai você.
O menu para o nosso restaurante mostrado em todo o seu esplendor na tela.
Você vê como este menu foi criado.
Veja a matriz de objetos JavaScript que você viu.
Veja como cada uma das propriedades da matriz de objetos JavaScript foi usada e
mapeada para os quatro itens na minha lista.
Veja como as imagens correspondentes foram incluídas aqui
usando o MatlistAvatar aqui.
Então, isso cria imagens redondas aqui e, em seguida, observe como o nome de
o prato é exibido aqui e, em seguida, a descrição do prato incluído aqui.
Maravilhoso. Agora, temos o menu para o nosso restaurante em
a tela usando um componente de menu em Angular.
Isso conclui este exercício.
Neste exercício, aprendemos a criar um novo componente.
adicioná-lo em nosso aplicativo Angular,
como incluir esse componente no modelo de
outro componente para que crie a hierarquia dos componentes.
Então vimos como podemos fazer uso do layout flexível angular e também
os componentes de design de material para projetar
o modelo para o nosso componente de menu para exibir o conteúdo aqui.
Agora, se você me perguntar como eu me lembro de todas essas coisas.
Bem, para ser honesto,
você não pode se lembrar de tudo, mas você precisa entender a abordagem.
Isso é mais importante do que tentar memorizar qualquer uma dessas coisas.
Agora, se você me perguntar onde eu consigo a informação sobre
o componente de lista de material angular.
Podemos classificar a documentação do material angular e lá você
terá os detalhes sobre como um componente de lista deve ser preparado.
Agora, onde obtemos os detalhes sobre como projetamos um componente em angular?
Nós apenas examinamos um pouco disso e, em seguida, neste exercício,
aprendemos a criar um novo componente e depois aplicá-lo em nossa aplicação angular.
Então, este é um bom ponto para você fazer um
obter comentário com os componentes da mensagem parte um.
No próximo exercício,
vamos melhorar isso um pouco mais usando outro tipo
de componente material angular para colocar o conteúdo na minha tela.