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:
[É necessário]
[É necessário]
[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:
Por exemplo:
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">
                  Cliente nº {{cli.id}} - {{cli.nome}}: {{cli.saldo | currency:'BRL':true:'4.2-2'}}.
                  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