Angular 6

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:
1. aluno.ts (classe de dados do componente)
2. aluno-provider.ts (classe para mapear as listas)
3. aluno.component.ts (inicializando as variáveis)
4. aluno.component.css (classe estilo css)
5. aluno.component.html (página web)

aluno.ts

Classe de dados do componente Aluno.

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;
	}
}

aluno-provider.ts

Classe para mapear as listas.

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;

    }

}			
			

aluno.component.ts

Criando as variáveis e métodos

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:
1. professor.ts (classe de dados do componente)
2. professor.component.ts (inicializando as variáveis)
3. 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 emulador...

Clicando em Professor..

Clicando em Aluno...

Clicando no botão listar...