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...