Antes de avançarmos com o resto dos exercícios e as atribuições neste curso,
Eu pensei que este seria um bom momento para mim para
dar a minha aplicação angular uma estrutura agradável.
Então, este é o lugar onde eu vou adicionar no cabeçalho e rodapé
para minha aplicação angular de modo que a maneira
a interface é renderizada é muito mais atraente do que o que tem sido até agora.
Então, vamos ver como podemos construir vários componentes para
ocupar diferentes partes da tela dentro da nossa aplicação angular.
Então, aqui, você vai ver que minha aplicação angular agora vai consistir em um cabeçalho,
que é um componente separado, o rodapé,
que é outro componente,
e, em seguida, entre os dois,
Eu terei a parte da minha aplicação angular que vai para
ser controlada mais tarde por usando o roteador angular.
Então, você vê, eu estou montando o palco para o que vai vir mais tarde neste curso.
Então, ao longo do caminho,
nós também vamos fazer uso de Font Awesome Icons dentro de nossa aplicação angular.
Eu sou apenas apaixonado pelo Font Awesome Icons,
então eu pensei que este seria um bom lugar para
introduzir esses ícones em minha aplicação angular.
Para prosseguir, vamos instalar fonte incrível em nossa aplicação angular.
Então, para fazer isso, vou usar NPM para ir,
e buscar font-awesome para mim,
então NPM instalar font-awesome 4.7.0, e salvar.
Então, deixe o font-awesome ser instalado.
Assim, uma vez que font-awesome entra em nossa aplicação angular,
e, em seguida, torna-se parte dos módulos de nó
que estão incluídos dentro da nossa aplicação angular,
o próximo passo é torná-lo disponível para a nossa aplicação angular.
Precisamos integrar font-awesome em nossa aplicação angular.
Então, para fazer isso,
vá para a pasta de origem,
e, em seguida, crie um arquivo chamado _Variables.scss na pasta de origem.
No arquivo Variables.scss,
adicione $fa-font-path: e
, em seguida, entre aspas, coloque../node_modules/font-awesome/fonts.
Então, estamos especificando o caminho da fonte para nossos arquivos incríveis de fonte aqui.
Em seguida, abra o arquivo Styles.scss,
e, em seguida, no arquivo Styles.scss,
vamos adicionar em algumas linhas lá.
Primeiro, vamos importar as variáveis que acabamos de declarar dizendo @import,
e dentro de aspas variáveis,
então vamos importar os arquivos font-awesome lá,
então vamos dizer
@import../node_modules/font-awesome/scss/font-awesome. Estamos importando a versão
SCSS porque estamos usando SCSS em nossa aplicação angular.
Uma vez que modificamos os estilos para o arquivo CSS,
vamos salvar as alterações.
Neste ponto, talvez seja necessário reiniciar
nosso servidor que estava servindo nossa aplicação angular.
Então, onde você digitou o serviço NG,
você pode querer parar o servidor que está servindo seu aplicativo angular e
reiniciá-lo para que ele irá incluir essas novas alterações que foram feitas.
Então, indo para o meu terminal,
Eu vou parar meu servidor,
e, em seguida, reiniciar o servidor para que ele leve em conta a alteração que eu fiz.
Você veria o estado atual de
nossa aplicação angular olhando para ele no navegador.
Então, isso é o que temos em nossa aplicação angular.
Eu quero ser capaz de adicionar um cabeçalho e rodapé para
esta vista para que eu possa usar tanto o cabeçalho como o rodapé,
e, em seguida, o conteúdo real entre o cabeçalho
eo rodapé na maneira como eu construir minha aplicação angular.
Então, para fazer isso,
Eu vou criar dois novos componentes chamados cabeçalho e rodapé,
e deixá-los gerenciar sua parte da tela que é alocada para eles.
Indo para o prompt, deixe-me gerar um novo componente de cabeçalho.
Eu posso até dizer ng g,
que é suficiente para angular CLI para
reconhecer que ele quer gerar um componente.
Então, eu digo ng g cabeçalho componente,
e também ng g componente rodapé.
Então, agora, eu tenho dois componentes que estão disponíveis para mim
para fazer uso de dentro da minha aplicação angular.
Como vou fazer uso desses dois componentes?
Vamos para o arquivo App component.html,
e, em seguida, fazer uso desses dois componentes na forma como
compor toda a tela para a nossa aplicação angular.
Voltando para a nossa aplicação,
vemos que o arquivo module.ts app
já inclui o cabeçalho e o componente rodapé
e eles já foram incluídos nas declarações aqui.
Então esta é a vantagem de usar o CLI angular,
ele cuida de todo esse trabalho de base para
você para que você possa se concentrar em apenas construir sua aplicação angular.
Então, essa é a razão pela qual eu amo o CLI angular
como uma abordagem para construir minha aplicação angular.
Então, agora, vamos para o arquivo HTML de componentes do aplicativo.
Então, aqui, você vê que incluímos o menu do aplicativo lá em baixo.
Vou remover esta barra de ferramentas do meu arquivo HTML de componentes do aplicativo.
Essa barra de ferramentas se tornará parte do modelo de cabeçalho do meu componente de cabeçalho.
Então, em vez disso, o arquivo
do modelo de componentes do aplicativo só conterá o cabeçalho e o rodapé na parte inferior.
Então, você vê que agora,
temos as visualizações dos três componentes.
O cabeçalho, o menu,
e o rodapé ocupando toda a tela.
Então, esses três componentes recebem essa parte da tela para si mesmos.
Vamos salvar as alterações e dar uma olhada rápida em nosso aplicativo no navegador.
Indo para o aplicativo no navegador,
você agora vê que o cabeçalho já ocupou é
parte da tela lá em cima, e obviamente,
desde que acabamos de preparar o componente,
ele apenas diz cabeçalho funciona,
e depois abaixo aqui,
o rodapé também tomou seu lugar na página da tela.
Agora, vamos agora ir em frente e atualizar os modelos para o cabeçalho e o rodapé
para que possamos definir bem a nossa interface para a nossa aplicação angular.
Vamos começar o trabalho no nosso rodapé.
Então, para começar no rodapé,
vamos para o arquivo de modelo do rodapé,
e então vamos substituir isso com o modelo recém-projetado do rodapé.
Agora, para sua conveniência,
Eu forneci o código para você nas instruções.
Será sábio copiar todo o código de lá,
e depois colá-lo aqui.
Em seguida, examine o que este rodapé faz.
Então aqui, você vê que eu tenho colado no código para o meu modelo de rodapé.
Agora, eu vou voltar a este código um pouco mais tarde.
Se você fez o curso anterior no Bootstrap,
você veria que esta é a forma material angular de implementar
o mesmo tipo de estrutura para o rodapé que fizemos no curso Bootstrap.
Algumas dessas coisas serão reconhecíveis para você já,
mas deixe-me completar a atualização para o modelo de rodapé,
e, em seguida, também vamos adicionar em alguns código SCSS no meu arquivo component.scss rodapé,
e, em seguida, dar uma olhada em como o rodapé agora se forma.
Então aqui, eu tenho novamente colado no código
das instruções de exercício que seguem este vídeo,
para mostrar as diferentes classes SCSS que eu adicionei no meu rodapé.
Então, eu tenho algumas classes que eu defini aqui,
Eu vou fazer uso delas para definir uma parte do meu rodapé,
e, em seguida, semelhante classe de rodapé aqui,
e eu tenho um SCSS misturando aqui,
e algumas variáveis aqui que
definir várias cores que eu vou usar no meu ângulo aplicação.
Então, vamos salvar as alterações que fizemos.
Vamos dar uma olhada no rodapé em sua encarnação atual,
e então vamos voltar e fazer uma visita rápida ao código que eu incluí tanto
no arquivo de modelo de componentes de rodapé e o código SCSS aqui.
Indo para a nossa aplicação angular no navegador, wallah,
lá você tem o novo rodapé para a nossa aplicação angular.
Então, você pode ver que eu tenho algumas coisas aqui.
Estes na borda esquerda são os vários links
para várias páginas que vão fazer parte da minha aplicação Angular.
Vamos ver como fazemos isso como parte dos próximos exercícios.
Agora, aqui eu estou fazendo uso do componente botão que
é parte do material Angular para definir esses links aqui,
então eu tenho o endereço aqui,
e então eu também usar novamente botões para definir esta seqüência
de botões para os vários links de mídia social para o meu restaurante aqui.
Então, você pode ver que eu tenho todos estes.
Para criar estes, eu uso
o suporte de material Angular para pequenos botões de ação flutuante aqui,
e que dá uma estrutura agradável para isso.
Se você já viu a versão Bootstrap deste,
Eu gosto disso muito mais do que a versão Bootstrap que eu criei no curso anterior.
Então, nosso rodapé está agora bem no lugar.
Vamos examinar rapidamente alguns dos códigos no rodapé.
Agora, eu não vou explicar isso em um monte de detalhes porque isso é para
lidar com mais o material Angular do que Angular em si,
mas ao longo do caminho apenas olhando para a estrutura do código,
você vai começar a ver como
esses componentes de Material Angular podem ser usados para definir algo assim.
Indo para o componente rodapé,
você vê que eu tenho uma div externa aqui para o qual eu especifiquei algum layout angular,
atributos de layout flex aqui,
então eu digo que a linha FxLayus,
e, em seguida, fxLayout sm e xs para ser coluna.
Então, para tamanhos de tela pequenos e extra pequenos é
indo para posicionar todo o conteúdo como colunas,
mas para os tamanhos de tela maiores,
ele vai posicioná-los como linha.
Então, isso é o que me dá a estrutura agradável para o meu rodapé.
Como você vê na div UI,
Estou posicionando todo o centro de conteúdo aqui,
e abaixo aqui,
Eu defino o primeiro.
Então, essa reviravolta matemática aqui que estou usando define meus links aqui.
Então, neste eu estou usando tapete como componente de material Angular,
e lá dentro eu estou usando o um com
o atributo componente botão tapete atribuído a um para criar esses botões aqui.
Mais tarde, eu vou voltar e adicionar
o código real para esses links nos exercícios subsequentes aqui.
Isso é o que me ajuda a criar a lista de links no lado esquerdo.
Este é o endereço que você vê,
este é bastante simples de olhar.
Então, esta é uma div para a qual estou usando FxFlex com 50,
e a outra com FxFlex com 40.
Então, 40 significa 40 por cento e 50 significa 50 por cento,
e aqui estou eu usando FxFlex offset 20 pixels.
Então, ele move esse conteúdo para a direita em 20 pixels.
Então, eu tenho um espaço de 20 pixels esquerda no lado esquerdo para
este div particular contendo estes links aqui.
Então, finalmente abaixo aqui,
Eu tenho esse conjunto de links que eu estou fazendo uso para
criar a barra com todos os links de mídia social lá.
Então, Eu estou usando um com o botão ícone tapete aqui.
Então, isso é o que cria os botões arredondados que você vê no rodapé lá.
Agora, para cada um destes,
Estou aplicando a classe correspondente aqui.
Então, você pode notar que botão Google Plus, botão Facebook,
todas essas classes são definidas no meu arquivo SCSS lá,
onde eu especifiquei as cores para o fundo e assim por diante para isso,
para que ele corresponda ao esquema de cores típico que esses sites de mídia social usam.
Então, gaste um pouco de tempo olhando para este código aqui,
e então você rapidamente terá uma noção de como o rodapé foi projetado.
Da mesma forma, indo para os componentes do rodapé Código Sass aqui,
para que você possa ver que eu defini várias cores aqui.
Eu estou usando uma mistura com a margem configurada aqui,
e, em seguida, para o meu rodapé,
Eu definir a cor de fundo apropriadamente,
e notar as várias classes que eu estou definindo aqui
um botão Facebook para o qual a cor e
a cor de fundo que eu defini para cada um deles.
Então, que a cor correspondente de
que o site de mídia social está sendo usado como a cor de fundo para cada um desses.
Agora, no curso Bootstrap anterior,
Eu tinha usado o Bootstrap Social para alcançar a mesma coisa.
Isso não funciona muito bem com o material Angular,
então é por isso que eu apenas criei meu próprio conjunto de óculos Sass aqui,
e depois adicionei o código que eu preciso para criar esses botões lá.
Se você precisa adicionar mais botões,
em seguida, basta criar mais classes como estas é correspondente a
os botões que você deseja adicionar em seu aplicativo.
Então, isso constrói nosso rodapé.
Agora, o cabeçalho é a próxima parte que vamos segmentar.
Indo para o cabeçalho, abrirá o cabeçalho
componentes arquivo de modelo e você verá o que ele contém.
Nós vamos substituir isso por
o modelo que eu dei para você nas instruções que se seguem aqui.
Então, basta ir em frente e cortar e colar esse código aqui,
porque isso não tem nada a ver especificamente com angular.
Então, é por isso que eu estou apenas permitindo que você corte e cole o código diretamente de lá,
economiza algum tempo para nós.
Você pode ver que agora substituí o modelo de cabeçalhos por algum código aqui.
Da mesma forma, enquanto estamos nisso,
também vamos adicionar em algum código SCSS para o meu arquivo Header.components.scss aqui,
basta ir e copiar o código das instruções.
Da mesma forma, enquanto estamos nisso,
vamos adicionar mais algumas classes SCSS ao meu arquivo Styles.scss principal.
Então, neste arquivo styles.scss principal,
vou adicionar em subcores e mais algumas classes para isso.
Então, vamos colar o código das instruções que lhe dei.
Então, a atualização para o arquivo Styles.scss agora está completa,
então eu adicionei em algumas cores aqui e misturar lá,
e, em seguida, na parte inferior eu adicionei em algumas classes mais aqui que
me ajudar quando eu estou projetando meus modelos para minha aplicação angular.
Então, todas essas mudanças,
vamos salvar as mudanças,
dar dar uma olhada rápida em como meu cabeçalho parece agora no aplicativo,
e, em seguida, vamos voltar e rever rapidamente o código que acabamos de incluir aqui.
Voltando para o meu aplicativo Angular no navegador,
agora você vê a barra de ferramentas reaparece no cabeçalho aqui,
junto com alguns links em
lá e, em seguida, uma imagem representando o logotipo para o meu restaurante,
e então aqui, você tem algo que usamos o arquivo jumbotron no anterior curso.
Eu vou apenas usar uma classe chamada jumbotron para criar este
no aplicativo Angular também,
então aqui no lado esquerdo eu tenho informações do meu restaurante e
o logotipo do restaurante e deixei algum espaço aqui para adicionar algo no futuro.
Então, aqui você vê meu aplicativo agora tomando forma com um cabeçalho,
com alguns links lá.
Agora, vamos fazer uso desses links em
os próximos exercícios para configurar meu aplicativo Angular,
e, em seguida, o menu sentado no meio e, em seguida, abaixo aqui meu rodapé.
Indo para o meu arquivo de modelo de componentes de cabeçalho,
agora você pode ver como criei a barra de ferramentas com os botões adicionais aqui.
Então, você se lembra que tínhamos a barra de ferramentas
já em uso no arquivo de modelo de componentes do aplicativo,
Eu cortei de lá e, em vez disso, usar a barra de ferramentas no modelo de cabeçalhos aqui.
Agora, dentro desta barra de ferramentas,
Eu incluí alguns links com a classe de botão aplicada a ele e isso é o que
me permite criar esses links na barra de ferramentas como um menu para minha aplicação web.
Abaixo lá, eu criei um div com o recipiente de classe e jumbotron.
Essa é a razão pela qual eu adicionei as classes de container e jumbotron no meu arquivo SCSS,
para que eu possa fazer uso delas dentro de meus templates aqui.
Então, para o qual novamente,
Eu aplico e alguns atributos de layout flexível aqui para me ajudar a projetar a tela lá.
Então você pode ver como eu usei um par de divs aqui com
o atributo FxFlex aplicado de acordo para criar a interface do usuário,
para minha aplicação aqui.
Então, passar um pouco de tempo aqui para dar uma olhada rápida neste código aqui para
entender rapidamente como meu layout para meu modelo de cabeçalho foi criado.
Não é tão complicado,
uma vez que você tenha completado o curso Bootstrap,
isso não é tão difícil de entender.
Ao longo do caminho, você também está aprendendo o layout flexível angular e, em seguida,
também os componentes angulares do material aqui.
Indo para o arquivo SCSS para o componente de cabeçalho,
você pode ver que eu adicionei em algumas cores aqui e, em seguida, uma mistura
em e, em seguida, também adicionado em uma classe jumbotron aqui.
Agora, a classe de contêiner não está aqui,
a classe de contêiner está no arquivo de estilos principais.
Porque a classe de contêiner é algo que eu estou indo para
usar para muitos dos modelos lá.
Então, é por isso que eu adicionei na classe container para o arquivo Styles.scss
que é o arquivo comum para toda a minha aplicação angular.
Então, lá eu adicionei em algumas cores adicionais aqui,
e também criei uma mistura aqui,
e, em seguida, adicionei no recipiente,
o fundo primário, e as cores de acento de fundo,
e então eu também estou usando outra classe chamada flexes spacer,
que eu vou fazer uso em um dos exercícios posteriores.
Todos esses passos estão em preparação para o que está indo para
vêm nos próximos vários exercícios.
My Angular aplicativo agora tomou uma boa forma em termos da forma como a interface do usuário é disposta,
para que eu possa agora começar a introduzir muito mais novos recursos para angular.
Pagando mais uma visita ao meu aplicativo Angular no navegador,
deixe-me ver como este aplicativo se parece em tamanhos de tela diferentes.
Então, este é o tamanho de tela de desktop padrão,
então vamos passar para um tamanho de tela menor e, em seguida, ver como o aplicativo parece.
Então, este é um tamanho de tela do iPhone 6 Plus,
para que você possa ver como o layout é diferente para o tamanho de tela menor.
Então, meu cabeçalho está lá em cima e meu menu na parte inferior e no rodapé aqui,
notar como as diferentes partes do rodapé foram
dispostas de forma diferente para o tamanho da tela extra pequena.
Este é o mesmo aplicativo no modo paisagem ou um iPhone 6 Plus,
para que você possa ver que meu cabeçalho é colocado assim e o menu lá e o rodapé.
Então, isso mostra que eu aproveitei o layout flexível angular
para ser capaz de criar diferentes layouts para diferentes tamanhos de tela.
Então, novamente, se você fez o curso Bootstrap mais cedo,
você vai começar a ver como o design responsivo com
o layout flexível angular também pode ser usado para obter resultados semelhantes.
Então, com isso, completamos este exercício.
Neste exercício, preparamos nossa aplicação Angular e preparamos
para o resto dos exercícios deste curso.
Este também é um bom momento para você fazer um commit git com o cabeçalho e rodapés da mensagem.