Angular 6 e Firebase — Desenvolvendo um portfólio (parte 2)

Template e ajustes iniciais

Para o desenvolvimento da aplicação, vamos utilizar um layout pronto no intuito de realizarmos poucas modificações no design (não consegui pensar em outra desculpa).

Escolhi o template do site startbootsrap. No endereço a seguir há uma galeria com alguns modelos:

https://startbootstrap.com/template-categories/portfolios/

Link do Template escolhido (Freelancer)

https://github.com/BlackrockDigital/startbootstrap-freelancer/archive/gh-pages.zip

Basicamente o que eu fiz foi indicar no meu arquivo index.html quais são os arquivos de estilos, atualizando os apontamentos corretamente. Isso garante que toda a aplicação utilizará os mesmos modelos. Também coloquei o endereço dos scripts para o funcionamento de alguns recursos do bootstrap.

Acesse o repositório e clone o projeto:

https://github.com/kheronn/portfolio

Componentes e Rotas

Tudo no angular é considerado componente. Desenvolver seguindo esse princípio facilita o desenvolvimento e a manutenção do código.

Para criação de componentes utilizando cli, digitamos no terminal:

ou na forma abreviada.

Vamos criar inicialmente dois componentes. No terminal digite:

Após a execução dos comandos, observe na estrutura de pastas do projeto que um diretório com 4 arquivos foram criado para cada componente.

home.component.html

Image for post
Image for post

Arquivo HTML onde definimos o template.

home.component.scss

Arquivo para estilizar os componentes usando CSS.

home.component.spec.ts

Para realização de testes unitários

home.component.ts

Classe onde codificamos os métodos, atributos do componente e toda a lógica necessária.

A mesma lógica serve para o menu-principal.

A home será o ponto de entrada da aplicação. Logo devemos configurar uma rota que nos permita acessar a partir da raiz (/) nossa componente principal.

No arquivo app.component.html limpe o código gerado na criação do projeto, deixando somente a tag

app.component.html

No arquivo app-routing.module.ts vamos definir a rota, passando no array de configurações Routes o caminho e o componente relacionado (linhas 5 a 9).

Image for post
Image for post

No arquivo menu-principal.html, vamos colocar as tags de navegação. O arquivo fica assim:

menu-principal.html

O que fazemos foi definir os apontamentos utilizando o atributo routerLink nas tags <a> do menu. O primeiro routerLink aponta justamente para a entrada da aplicação “/”.

Enquanto que os links painel e admin apontam para /admin e /contato.

Essas rotas serão criadas posteriormente.

Ao abrir o arquivo menu-principal.component.ts, notamos o decorator @Component que marca a classe como um componente angular. Vamos utilizar o seletor dessa classe para chamar nosso menu em todas as páginas da aplicação.

Na class app.component.html, incluímos o seletor do menu assim;

Finalmente, vamos deixar nossa página home.component.html com elementos básicos.

Após a tag body, ficou assim:

home.component.html

Troquei o ícone no banner principal por um foto minha. Precisei deixar alterar o estilo.

No arquivo home.component.scss criei uma classe img-profile definindo o tamanho e deixando a imagem circular

home.component.scss

No terminal, digite novamente ng serve -o no terminal para ver como ficou.

Image for post
Image for post

Parte 3 —

https://medium.com/@kheronn.machado/angular6-firebase-portfolio-part3-c63ba1cd83cd

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store