Passo a Passo: Criando app Angular do 0!

No tutorial de hoje eu mostro para vocês como criar uma aplicação Angular do 0, em um passo a passo muito simples e intuitivo.

Requisitos:

Primeiramente para trabalhar com Angular é necessário ter o Angular CLI instalado no seu PC, O Angular CLI é a ferramenta utilizada para criar projetos, componentes, executar aplicações, criar serviços e outros recursos do universo Angular.

>> Instalação do Angular CLI

Com oAngular CLI instalado vamos agora ao próximo passo.

PASSO 0: CRIANDO CLIENTE HTTP

Primeiramente , vamos  simular uma API usando a ferramenta JSON Server, para isso siga os passos abaixo:

0.0 Crie o arquivo JSON (com conteúdo) e o salve dentro da pasta do seu projeto angular.

 

0.1 No prompt de comando (windows), selecione através do comando cd a pasta do projeto angular.

0.2 Com a pasta selecionada execute o comando: json-server --watch "nome do arquivo".JSON.

0.3 Se der tudo certo você verá na tela do terminal uma lista com os resources e a home do servidor JSON.

AGORA QUE TEMOS NOSSO SERVIDOR BACK-END RODANDO PODEMOS CRIAR NOSSO PROJETO

PASSO 1: CRIANDO O PROJETO

1.0 Crie um projeto com o comando: ng New "nome do projeto", no meu caso o nome do projeto vai ser "projeto".

 1.1 O terminal vai perguntar se você deseja instalar o sistema de rotas, você seleciona sim (y).

1.2 Também será perguntado qual tipo de estilo você deseja para o projeto, por padrão selecionaremos CSS.

1.3 Terminada a instalação, Inicie o servidor através do comando: ng serve

AGORA JÁ TEMOS A APLICAÇÃO RODANDO

PASSO 2: CRIANDO UM SERVIÇO

2.0 Crie um novo serviço através do  comando: ng g s "nome do serviço", no meu caso o nome vai ser "cursos" e ele vai ficar contido dentro de uma pasta com o mesmo nome.

2.1 No arquivo "nome do serviço". service.ts, coloque o import do Http Client.

2.2 Ainda no arquivo "nome do serviço".service.ts, insira no argumento do construtor um objeto do tipo HttpClient de nome http.

2.3 Importar o HttpClient no arquivo app.module.ts.

Dica: É bom importar o HttpClient Module sempre depois do módulo Browsermodule.

2.4 Voltando ao arquivo "meu serviço".service.ts, vamos criar o nosso primeiro método, no meu caso vou chamá-lo de List, esse método vai retornar um método   get do objeto http criado no construtor.

2.5 Dentro da classe do nosso serviço, crie um atributo private que conterá a URL que vai ser passada para o método GET de LIST. Após cria-la coloque-a como parâmetro da função GET.

OBS: Quando fazemos o http get nós podemos tipá-lo. Em nosso código atual o retorno do método List é um Observable Object, nós podemos criar uma interface e parametrizar a chamada do método GET do objeto HTTP para retornar um objeto  do mesmo tipo da interface criada, é o que faremos a seguir.

2.6 Crie um arquivo no mesmo diretório do serviço com o nome curso.ts e nele crie uma interface.

2.7 Em segunda parametrize a chamada de GET para retornar um tipo Curso.

AGORA LIST RETORNA UM ARRAY DO TIPO CURSO.

OBS:

Como você vai usar a interface, não se esqueça de importa-la no início do arquivo "nome do serviço".service.ts.

PASSO 3: CRIANDO UM COMPONENTE

3.0 No terminal, crie um componente através do comando: ng g c "nome do componente", no meu caso o nome vai ser "LISTA".

COM O COMPONENTE CRIADO, VAMOS CONFIGURAR A ROTA PARA ACESSÁ-LO.

3.1 Coloque no arquivo app-routing.module.ts o import do componente que você acabou de criar.

Dica: Você pode encontrar o import dos seus componentes no arquivo app.modules.ts dentro de seu projeto.

3.2 Dentro das chaves da constante routers coloque a definição da rota com seu respectivo componente no formato: " { path: 'nome da rota', component: nome da classe do componenete  },".

3.3 Teste a rota do componente, provavelmente ela será: http://localhost:4200/lista

Dica: Limpe todo o conteúdo do arquivo app.component.html deixando apenas as tags "<router-outlet></router-outlet>" desse jeito, isso fará com que ao acessar a rota do seu componnete você veja unicamente o conteúdo do mesmo.

3.4 Agora vamos injetar o serviço no componente Lista, para isso  importe o serviço no arquivo lista.component.ts e em seguida crie um serviço do tipo serviço no construtor do componente Lista.

import {CursosService} from '../cursos/cursos.service';

 

 constructor(private service: CursosService) { }

 

3.5 Crie agora um array de objetos do tipo Curso, não se esqueça de fazer o import da interface no arquivo lista.component.ts.

import { Curso } from '../cursos/curso';

 cursos: Curso[];

3.6 No método ngOnInit da classe ListaComponent adicione uma chamada ao método List do serviço serviço.

this.service.list();

3.7 Adicione o subscribe com um console log como parâmetro para verificar se no console do navegador está tudo ok.

this.service.list().subscribe(console.log);

Obs: Na aba desenvolvedor do nevegador você vai observar que a guia console mostra a resposta JSON.

 

3.8 Depois de verificado que o servidor JSON está interagindo com a aplicação, remova o console log do parâmetro de subscribe e o substitua por: dados=> this.cursos = dados

  this.service.list().subscribe(dados=> this.cursos = dados);

Isso fará com que a resposta do servidor seja armazenada no objeto curso.

3.9 No arquivo HTML do nosso componente (lista.component.html) adicione uma tabela com um ngfor para varrer o array cursos e exibir seu resultado.