Angular6 Restfull
Iremos fazer nesse projeto: App Rota, Provider, Visibilidade, Routing e Listar
Parte principal do projeto:
Crie um novo componente chamado "aluno" dentro de "app"
Que irá conter:
- aluno.ts (classe de dados do componente)
- aluno-provider.ts (classe para mapear as listas)
- aluno.component.ts (inicializando as variáveis)
- aluno.component.css (classe estilo css)
- aluno.component.html (página web)
Classe de dados do componente Usuario.
aluno.ts
export class Aluno {
id: number; nome: string; email: string; foto: string;
constructor()
constructor(id?: number, nome?: string, email?: string, foto?: string) {
this.id = id;
this.nome = nome;
this.email = email;
this.foto = foto;
}
}
Classe para mapear as listas.
aluno-provider.ts
import { Injectable } from '@angular/core';
import { Aluno } from './aluno';
@Injectable() export class AlunoProvider {
alunos: Aluno[];
public static ALUNOS = [
{
"id": 10,
"nome": "darlan",
"email": "darlan@gmail.com", "foto": "https://icon-icons.com/icons2/108/PNG/256/males_male_avatar_man_people_faces_18355.png"
},
{
"id": 11,
"nome": "daiane 7",
"email": "daiane@gmail.com", "foto": "https://icon-icons.com/icons2/108/PNG/256/females_female_avatar_woman_people_faces_18407.png"
},
{
"id": 12,
"nome": "lu",
"email": "lu@gmail.com", "foto": "https://icon-icons.com/icons2/582/PNG/512/wonder-women_icon-icons.com_55030.png"
},
{
"id": 13,
"nome": "hugo",
"email": "hugo@gmail.com",
"foto": "https://comps.canstockphoto.com.br/menino-gr%C3%A1fico-pessoas-pessoa-vetor-eps_csp39030384.jpg"
}, {
"id": 14,
"nome": "diego",
"email": "muculmano@gmail.com",
"foto":
"https://st3.depositphotos.com/1006318/13470/v/1600/depositphotos_134700550-stock-illustration-arab-profile-icon-male-avatar.jpg"
},
{
"id": 15,
"nome": "rei de uganda",
"email": "aleque@gmail.com",
"foto":
"https://avatars.schd.ws/c/07/5187194/avatar.jpg.320x320px.jpg"
},
{
"id": 16,
"nome": "bruno",
"email": "brunmo@gmail.com",
"foto": "https://cdn.cgsociety.org/t/g15/547715/17705828_orig.jpg"
}
] as Aluno[];
constructor() {
this.alunos = AlunoProvider.ALUNOS;
}
public adicionar(aluno: Aluno) {
this.alunos.push(aluno);
}
public getAlunos() {
return this.alunos;
}
}
Criando as variáveis e métodos
aluno.component.ts
import { Component } from '@angular/core';
import { Aluno } from './aluno';
import { AlunoProvider } from './aluno-provider';
@Component({ selector: 'app-aluno', templateUrl: './aluno.component.html'
})
export class AlunoComponent {
visibilidade: boolean = false;
alunos: Aluno[];
aluno: Aluno;
paramOutput: string;
constructor() {
this.aluno = new Aluno();
}
mostrar() {
this.visibilidade = true;
this.alunos = AlunoProvider.ALUNOS;
}
}
aluno.component.html
<div>
<h2>Troca de Dados</h2>
<button type="button" (click)="mostrar()">Listar</button>
<div *ngFor="let item of alunos">
<h2>{{item.nome}}</h2>
<b>{{item.email}} ,Codigo :{{item.id}}</b>
<img [src]="item.foto" width="200px" height="200px" />
</div>
<hr/> Bem vindo a professor ...
<br/>
<nav>
<a routerLink="/professor" routerLinkActive="active">
Va para Professor</a>
</nav> <!--
input-output [inputParam]="Ultima Aula troca Envio Uganda
..."
(outputParamEvent)="changedOutput($event)" input-output <br/>
{{paramOutput}}
-->
</div>
Em “app”, crie o componente “app.routing.ts”
app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { AlunoComponent } from './aluno/aluno.component';
import { NgModule } from '@angular/core';
const routes: Routes = [
{ path: 'aluno', component: AlunoComponent } ];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
app.module.ts
import { AlunoComponent } from './aluno/aluno.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ProviderAluno } from './aluno/providerAluno';
import { AppRoutingModule } from './app.routing';
@NgModule({ declarations: [ AppComponent, AlunoComponent
], imports: [
BrowserModule, AppRoutingModule
], providers: [ProviderAluno],
bootstrap: [AppComponent]
}) export class AppModule { }
Crie um novo componente chamado "Professor" dentro de "app"
Que irá conter:
- professor.ts (classe de dados do componente)
- professor.component.ts (inicializando as variáveis)
- professor.component.html (página web)
professor.ts
export class Professor {
nome: string;
disciplina: string;
situacao: string;
nomealuno: string;
constructor()
constructor(nome?: string, disciplina?: string, situacao?: string, nomealuno?: string) {
this.nome = '' || 'bruta';
this.disciplina = '' || 'angular';
this.situacao = '' || 'Aluno reprovado';
}
//mongodb (dba --> empresa ...) //mobile (500) developers 100
//angular avancado ...
}
professor.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'app-professor',
templateUrl: './professor.component.html'
})
export class ProfessorComponent {
msg: string;
constructor() {
this.msg = "Pagina do Professor, Curso de Angular Coti Informatica";
}
}
professor.component.html
<div>
<h2>Seja Bem Vindo a Pagina do Profesor</h2>
{{msg}}
<hr/>
<h2>Welcome Aluno</h2>
<nav>
<a routerlink="/aluno" routerLinkActive="active">Va para Aluno</a>
</nav>
</div>
app.module.ts
import { ProfessorComponent } from './professor/professor.component';
import { AlunoComponent } from './aluno/aluno.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { AlunoProvider } from './aluno/aluno-provider';
@NgModule({
declarations: [
AppComponent,
AlunoComponent,
ProfessorComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule
],
providers: [AlunoProvider],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { ProfessorComponent } from './professor/professor.component';
import { AlunoComponent } from './aluno/aluno.component';
import { NgModule } from '@angular/core';
const routes: Routes = [
{ path: 'professor', component: ProfessorComponent },
{ path: 'aluno', component: AlunoComponent }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
app.component.html
<div> <li routerLinkActive="active"> <a routerLink="/professor">Professor</a> </li> <router-outlet></router-outlet> <li routerLinkActive="active"> <a routerLink="/aluno">Aluno</a> </li> <br/> <a href="app-professor">Professor</a> <br/> <a routerLinkActive="active" routerLink="/professor">Professor</a> | <a routerLinkActive="active" routerLink="/aluno">Aluno</a> | </div>
Rodando o projeto...
Clicando em Professor..
Clicando em Aluno...
