Angular - Tutorial Básico
OBS:. Para fazer este tutorial sobre "Listagem de Clientes", você pode fazer seguindo fielmente o que está escrito ou fazer online sem ter que baixar nada, utilizando este site: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview .
Passos importantes para realizar para iniciar este tutorial sobre Angular:
Baixe os seguintes arquivos:
- Nodejs - https://nodejs.org/en/
[É necessário]
- Sublime Text - https://sublimetext.com/2
[É necessário]
- Visual Studio Code - https://code.visualstudio.com/
[Não é necessário, caso você decida fazer online ou utilize outra IDE]
Após isso, é necessário criar uma pasta no C: chamado de "workspace", dentro copiar pasta "lab01" descompactada, baixada dos "Arquivos do Angular". Agora é necessário fazer uma cópia e renomear para "lab02".
Agora, acesse o cmd e digite:
- cd.. (digitar este comando até voltar para a raiz C:)
- cd workspace\lab02
Agora dentro da pasta, é necessário configurar o Proxy.
Para isso, no cmd, verifique se você está no "C:\workspace\lab02" e então digite este comando abaixo:
- npm config set proxy http://usuario:senha@host_proxy:porta_proxy
Por exemplo:
- npm config set proxy http://cldamasceno:senha@proxylatam.indra.es:8080
Agora é necessário instalar e depois "startar" dentro do "C:\workspace\lab02".
Para isso, no cmd, verifique se você está no "C:\workspace\lab02" e então digite este comando abaixo:
- npm install
E depois de instalar vamos "startar":
- npm start
Com isso feito, vamos direto para o Visual Code.
Ao abrir o Visual Code, não haverá nada selecionado. Então, será necessário abrir a estrutura que já está pronta. Para abrir a estrutura já criada no VisualCode (esta estrutura está no lab02), é necessário clicar em "File\Open Folder..." e selecionar "Lab02" na pasta workspace.
Com ele aberto, vamos para algumas informações antes de programar em si:
Informações Úteis sobre o Angular
- "Template" usa a crase ([`] crase não é 'aspas simples'; na maioria dos teclados, está junto com o acento agudo);
- O "export class AppComponent" é igual a Visibilidade em outras linguagens (por exemplo: public static do Java);
- Exemplo de CurrencyPipe
<p>Valor: {{ data | currency:'USD':true:'4.2-2'}}</p>
Componentes: Um "Component" controla aquilo que podemos chamar de "view", de acordo com seletores e pode usar "providers", "directives" e "templates". Ele também é um módulo, que para ser usado precisa ser exportado como visto acima.
Veja abaixo o exemplo de um "component" (componente):
@Component({
selector: 'aplicativo',
templateUrl: 'app/view.html',
directives: [DetailComponent],
providers: [myService]
})
export class AppComponent{ ... }
"selector": É uma tag HTML em seu arquivo principal (index.html), como a seguinte <aplicativo></aplicativo> . É nesta tag que o seu aplicativo será construído.
"templateUrl": É o caminho do arquivo HTML que será usado como "view". Pode ser usado somente "template", onde deve ser passado uma string com código HTML.
"directives": Um vetor com os componentes ou diretivas que este componente requer.
"providers": Um vetor com as dependências para os serviços que serão requiridos pelo componente.
Agora, segue abaixo os códigos de suas respectivas classes no Angular:
===================
===================
import { Component } from '@angular/core';
import { Cliente } from './cliente';
@Component({
selector: 'my-app',
template: `
<h1>{{titulo}}</h1>
<h2>Cliente selecionado: {{cliente}}</h2>
<div style="text-align: center">
<ul>
<li *ngFor="let cli of clientes">
CEP: {{cli.cep | cep}}
<br><br>
</li>
</ul>
</div>
<p *ngIf="clientes.length<1">Não há nenhum cliente registrado</p>
`
})
export class AppComponent {
titulo:string = 'Listagem de Clientes';
clientes = [
new Cliente(1, 'Fulano de Tal', 1500, '048490172'),
new Cliente(2, 'Sir Deutrano', 800, '012345678'),
new Cliente(3, 'I'm error', 5300, '048490172')
];
cliente:string = this.clientes[0].nome;
}
=============================================
CLIENTE.TS - Criar dentro da pasta "app" no VisualCode.
=============================================
export class Cliente {
constructor(
public id:number,
public nome:string,
public saldo:number,
public cep:string){}
}
===============
===============
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CepPipe } from './cep-pipe';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, CepPipe],
bootstrap: [ AppComponent ]
})
export class AppModule { }
=============================================
CEP-PIPE.TS - Criar dentro da pasta "app" no VisualCode.
=============================================
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name:'cep'
})
export class CepPipe implements PipeTransform {
transform(value: string):string{
return value.substr(0,5) + '-' + value.substr(5,3);
}
}
Como passo adicional, você pode fazer no css.
==========
STYLE.CSS
==========
h1 {
color: #370;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2{
color: #970;
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;
background-color: #ee1;
}
Resultado final:
Dúvidas ou sugestões deixe seu comentário e aguarde por mais posts sobre Angular.
Comentários
Postar um comentário