Scribd Logo
Carica

Benvenuto in Scribd!

  • Codigos Da Pratica 5

    Caricato da

    Bibiana Lemos E. Regis Santana
    71 visualizzazioni6 pagine
    Aula 5 desenvolvimento web Uninter

    Titolo originale

    Codigos da pratica 5

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Aula 5 desenvolvimento web Uninter

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    71 visualizzazioni6 pagine

    Codigos Da Pratica 5

    Caricato da

    Bibiana Lemos E. Regis Santana
    Aula 5 desenvolvimento web Uninter

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 6

    FERRAMENTAS DE

    DESENVOLVIMENTO
    WEB

    AULA PRÁTICA 5 – CONSULTA CEP


    Para iniciar o projeto:
    ng new (nome do projeto)

    Na pasta (nome do projeto> >src> app

    No arquivo: app.component.html [Digitar]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-
    Compatible" content="IE=edge">
    <meta name="viewport" content="width=d
    evice-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <h3>Confere CEP</h3>
    <form class='' #cepFom="ngForm" (ngSub
    mit)="pesquisa()">

    <div>
    <label for="cep" class="">
    Informe seu CEP
    </label>
    <input name="cep" type="text"
    [(ngModel)]="cep">
    </div>
    <div class="btn btn-
    primary btn-sm btn-icon-split">
    <span class="icon text-
    white-80">
    <i class="fas fa-
    home"></i>
    </span>
    <button class="btn btn-
    primary btn-
    sm" type="submit">Pesquisa</button>
    </div>
    </form>
    <br>
    <div class="ml-2 spinner-
    broder spinner-border-
    sm" [hidden]="!espera"></div>
    <div class="shadow-lg mx-
    4" [hidden]="!pesquisado">
    <b>CEP pesquisado: </b>
    {{cep}}
    <br><b>Rua encontrda: </b>
    {{retorno.rua}}
    <br><b>Na cidade: </b>
    {{retorno.cidade}}
    <br><b>Do estado: </b>
    {{retorno.estado}}
    <br><br><br><button (click)="limpa
    ()">Reinicia</button>
    </div>
    </body>
    </html>
    No arquivo app.module.ts [digitar está em Vermelho]

    imports:[
    FormsModule,
    BrowserModule,
    HttpClientModule
    ],

    O Programa fará a importação

    import {HttpClientModule} from '@angular/


    common/http';

    Ficara assim:

    import {BrowserModule} from '@angular/plat


    form-browser';
    import{NgModule} from '@angular/core';
    import {HttpClientModule} from '@angular/
    common/http';
    import{FormsModule} from '@angular/forms';

    import {AppComponent} from './app.componen


    t';
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports:[
    FormsModule,
    BrowserModule,
    HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule{}

    No arquivo app.compoent.ts [digitar]

    import { Component } from "@angular/core";


    import { HttpClient } from "@angular/commo
    n/http";

    @Component({
    selector:'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent{
    title='ola-mundo';
    constructor (private http: HttpClient){}

    //variaveis do form
    cep: string='';

    //..variaveis do retorno
    endereco;
    retorno={
    rua: '',
    cidade:'',
    estado: ''
    }
    //logradoro=rua, localidade=cidade, uf=e
    stado
    pesquisado=false;
    espera=false;
    pesquisa(){
    this.espera=true;
    this.cep=this.cep.replace(/\D/g,'');

    const url='http://viacep.com.br/ws/'
    +this.cep+'/json/';

    // while(true) teste=0;
    this.http.get(url).subscribe( (res)
    => {
    this.endereco=res;
    this.retorno.rua=this.endereco.l
    ogradouro;
    this.retorno.cidade=this.enderec
    o.localidade;
    this.retorno.estado=this.enderec
    o.uf;
    //console.log(this.endereco);
    });
    this.pesquisado=true;
    this.espera=false;
    }
    limpa(){
    this.pesquisado=false;
    this.espera=false;
    this.cep="";
    this.endereco="";
    this.retorno.rua="";
    this.retorno.cidade="";
    this.retorno.estado="";
    }
    }

    Abrir o terminal, na pasta do projeto, executar o ng serve

    Potrebbero piacerti anche