Instalando Angular Cli

Instalando angular cli
1. Abra o cmd.
2. Limpe o cache com o comando npm cache clean
3. Instale o angular cli com o comando npm install –g @angular/cli
4. Verifique a versão instalada com o comando ng –v
Criando um novo projeto
1. Abra o cmd
2. Se posicione dentro da pasta onde deseja que o projeto seja criado
3. Execute o comando ng new nomeProjeto
Iniciando a aplicação recém criada
1. Abra o cmd.
2. Se posicione dentro da pasta do projeto
3. Execute o comando ng serve
4. Verifique no console o número da porta e no navegador digite o
localhost:numeroPorta
Iniciando a aplicação com sua porta de escolha

1. Abra o cmd.
2. Execute o comando ng serve –port portaDeSuaEscolha
Encerrando a aplicação recém criada
1. Abra o cmd.
2. Execute o comando netstat -a -n -o
3. Identifique o PID conforme porta da aplicação.
4. Em posso do PID execute taskkill -f /pid numeroPID
Instando o bootstrap
1. Abra o cmd.
2. Se posicione dentro da pasta do projeto
3. Execute o comando npm install bootstrap@next –save
Obs., save para informarmos ao projeto que será uma dependência no package.json
Fazendo uso do bootstrap
1. Abra o arquivo angular-cli.json

2. Localize o atributo style e adicione a localização do .css ao final as páginas podem
fazer uso dos estilos.
Criando um component
1. Dentro da pasta src disponibilize uma nova pasta com o nome do módulo
2. Dentro da nova pasta crie o novo arquivo de nome nomeModulo.component.ts
/* Importando o core do angular */

import { Component } from "@angular/core";
/*
Dizendo que se trata de um component
selector --> tag que será usada pra obtenção do módulo
template --> código html curto incluído no próprio módulo
templateUrl --> código html externo
*/
@Component({
selector: "hello",
template: `
<h2>Hello {{nome}}</h2>
`
})
/*
classe do módulo
export --> declaramos que este módulo estará visivel aos demais
*/
export class HelloComponent {
nome = "Rodrigo";
}
3. Abra o app.module.ts
4. Importe o novo módulo
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

/* Importando o novo componente */
import { HelloComponent } from './hello/hello.component';
@NgModule({
declarations: [
AppComponent,
/* Declarando o novo componente */
HelloComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Interpolação
Diz-se a junção de muitas saidas, isto é, no angular fazemos a interpolação por meio da
expressão
<p>{{ 20 + getIdade() }}</p>
<p> Meu nome é {{ nome }} </p>
Event binding e property binding
Diz-se das interações do usuário com o component.
 Na ação do click fomos encaminhados ao método em questão, são duas maneiras de

fazer.
<button type="button" class="btn btn-primary" on-click="adicionar()" >Adicionar</button>

<button type="button" class="btn btn-primary" (click)="adicionar()" >Adicionar</button>
 Nas ações sobre os inputs
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" (input)="adicionar($event)" >
<input type="text"
class="form-control"
(input)="nome = $event.target.value" >
</div>
$event disponibiliza o elemento html bem como seu atributos.
 Preenchendo o value do component por meio do atributo
<label>Nome</label>
<input type="text" class="form-control" value="{{nome}}" >
</div>
 Criando variável de referência (template reference variable)
Declaramos #nomeVariavel como mais um atributo da tag e a mesma ficará disponível e

qualquer trecho da aplicação.
<label>Nome</label>
<input type="text" class="form-control" #nomeInput >
</div>
<button type="button"
class="btn btn-primary"
(click)="adicionar(nomeInput)"
</button>
 Ligando tag entre si por meio do binding
No exemplo abaixo verificamos a qtde de caracteres do atributo, se for igual a zero

desabilitamos o botão por meio da propriedade disabled
bind-disabled="nome.length == 0" >Adicionar
</button>
[disabled]="nome.length == 0" >Adicionar
</button>
 Fazendo event binding e property juntamente (Using Two-Way Data Binding)
<label>Nome</label>
<input type="text" class="form-control" [(ngModel)]="nome" >
</div>
Requer importar no app.module.ts
import { FormsModule} from '@angular/forms';

imports: [
BrowserModule,
FormsModule
]
Assim tando o atributo no model será atualizado na interação do input como o value do input
será atualizado no retorno do model.
Diretivas ngIf e hidden
No exemplo abaixo vamos adicionar e remover uma div de mensagem conforme estado de
uma variável boolean, na ação do clicar processamos e atribuímos a variável o valor true, na
interação com o input esta mesma variável é atribuida com false para reinicialização do fluxo:
*ngIf = * indica que é indispensável pra construção do dom
[hidden]
<div class="container">
<div class="alert alert-success" role="alert" *ngIf="adicionado">
Funcionário adicionado: <strong>{{nome}}</strong>
</div>
<div class="alert alert-success" role="alert" [hidden]="!adicionado">

</div>
<label>Nome</label>
<input type="text"
[(ngModel)]="nome"
(focus)="adicionado = false" >
</div>
[disabled]="nome.length == 0"
(click)="adicionar()" >Adicionar</button>
</div>
Diretivas ngfor
Criamos uma lista no component e conforme vamos adicionando a lista é inclementada, com
isto o ngFor vai modificando o dom adicionado novos cards
*ngFor = * indica que é indispensável pra construção do dom

</div>
<label>Nome</label>
<input type="text"
[(ngModel)]="nome"
</div>
(click)="adicionar()" >Adicionar</button>
<div class="row" style="margin-top: 20px" >

<div class="col-2" *ngFor="let funcionario of funcionarios" >
<div class="card" >
<img class="card-img-top"
src=""
alt="Card image cap">
<div class="card-block">
{{funcionario.nome}}
</div>
</div>
</div>
</div>
</div>
Comunicação entre os componentes
Criamos um componente que contem uma div que recebe o objeto funcionario:
<div class="card" >
<img class="card-img-top"
src=""
alt="Card image cap">
</div>
</div>
No componente de extensão ts declaramos uma variável de anotação @Input fazendo com

que recebamos uma variável declarada em outro componente:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-funcionario-card',
templateUrl: './funcionario-card.component.html',
styleUrls: ['./funcionario-card.component.css']
})
export class FuncionarioCardComponent {
@Input ("funcionario") funcionario: any;
Fazendo uso:
</div>
<label>Nome</label>
<input type="text"
[(ngModel)]="nome"
</div>
(click)="adicionar()" >Adicionar
</button>
<div class="row" style="margin-top: 20px" >

<div class="col-2" *ngFor="let func of funcionarios" >
<app-funcionario-card [funcionario]="func">
</app-funcionario-card>
</div>
</div>
</div>
Trabalhando com EventEmitter
Trabalhando com stylos de outros jeitos
No exemplo abaixo ao invés de fazer uso do import declaramos em linha as propriedades:

@Component({
//styleUrls: ['./funcionario-card.component.css']
styles: [`
.card-block {
text-transform: uppercase;
color: blue;
}
`]
})
Trabalhando com ngStyle
Com ngStyle podemos declarar propriedades css na linha ou como retorno do método do
controller:
<div class="card" [ngStyle]="{ 'background-color': 'red' }" >

<img class="card-img-top" src=" " alt="Card image cap">
</div>
</div>
<div class="card" [ngStyle]="getEstiloCartao()" >

</div>
</div>
@Component({
//styleUrls: ['./funcionario-card.component.css']
styles: [`
.card-block {
text-transform: uppercase;
color: blue;
}
`]
})
getEstiloCartao() {
return {
"border-width" : this.funcionario.id + "px",
"background-color" : this.funcionario.id % 2 === 0 ? "lightblue" :
"lightgreen"
};
}
}
Trabalhando com ngClass
<div class="card" [ngStyle]="getEstiloCartao()" >

<span [ngClass]="{ 'badge': true, 'badge-danger': isAdmin(), 'badge-
primary': !isAdmin() }" > {{funcionario.nome}} </span>
</div>
</div>
isAdmin() {
return this.funcionario.nome.startsWith("T");
}
Extensões úteis do visual code

Angular v4 TypeScript Snippets – auto complete typescript.
Auto Import – Faz o import automaticamente conforme recurso é solicitado.
Bookmarks – Colocar notas no código.
EditorConfig for VS Code – impor estilos de programação, configurações básicas são

encontradas no arquivo de nome editorconfig.
Guides – Gera uma linha da abertura até o fechamento da tag para melhor entendimento do
código.
HTML Snippets – Auto complete html.
Intellisense for CSS class names – Ao fazer uso de arquivos css traz a lista de estilos para
seleção.
Path Intellisense – Ao fazer import ou seleção de arquivo traz a hierarquia de pastas para fácil
navegação.
TSLint – Válida os padrões de desenvolvimento bem como erro em tempo de codificação.
Vscode-icons – Gera icones para fácil identificação conforme extensão do arquivo.
Criando diretivas
No exemplo abaixo criamos uma diretiva que altera o fundo do input para amarelo
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appCampoColorido]'
})
export class CampoColoridoDirective {
constructor (
private elementoHtml: ElementRef, // Pegando o elemento hospedeiro
private renderer: Renderer2 // Instância do objeto que nos permite
alterar o componente html
) {
this.renderer.setStyle(this.elementoHtml.nativeElement,
'background-color', 'yellow');
}
<input type="text" class="form-control" [(ngModel)]="nome"

(focus)="adicionado = false" appCampoColorido >
@HostBinding -> verifica qual componente html esta atrelado a diretiva e altera a cor de
fundo. Exemplo com alteração pelo binding
import { Directive, ElementRef, Renderer2, HostListener, HostBinding }
from '@angular/core';
@Directive({
})
// HostBinding verifica qual componente html esta atrelado a diretiva e

altera a cor de fundo
@HostBinding('style.backgroundColor') corDeFundo: string;
constructor () { }
// HostListener aguarda ocorrências informadas no construtor e executa

o método
@HostListener('focus') aoGanharFoco() {
this.corDeFundo = 'yellow';
}

o método
@HostListener('blur') aoPerderFoco() {
this.corDeFundo = 'transparent';
}
@HostListener -> aguarda ocorrências informadas no construtor e executa o método. Exemplo

com alteração sem o binding
import { Directive, ElementRef, Renderer2, HostListener, HostBinding }
from '@angular/core';
@Directive({
})
constructor (
private elementoHtml: ElementRef, // Pegando o elemento hospedeiro
private renderer: Renderer2 // Instância do objeto que nos permite
alterar o componente html
) { }

o método
'background-color', 'yellow');
}

o método
'background-color', 'transparent');
}
@Input -> Receber a cor como parâmetro

import { Directive, ElementRef, Renderer2, HostListener, HostBinding,
Input } from '@angular/core';
@Directive({
})
@Input() cor;


o método
this.corDeFundo = this.cor;
}

o método
}

(focus)="adicionado = false" appCampoColorido cor="green" >
exportAs -> Serve para exportar a diretiva afim de que usemos em outros cenários, abaixo
testamos no click do button, repare que no input criamos uma variável para recepcionar o
retorno da diretiva e esta mesma variável é usada para nos button para acessar os métodos
import { Directive, ElementRef, Renderer2, HostListener, HostBinding,
Input } from '@angular/core';
@Directive({
selector: '[appCampoColorido]',
exportAs: 'campoColorido'
})
@Input() cor;

@HostListener('focus') colorir() {
this.corDeFundo = this.cor;
}
@HostListener('blur') descolorir() {
}

</div>
<label>Nome</label>
(focus)="adicionado = false" appCampoColorido cor="green"
#campo="campoColorido">
</div>
<button type="button" class="btn btn-primary" [disabled]="nome.length ==

0" (click)="adicionar()" >Adicionar</button>
<button class="btn btn-info" (click)="campo.colorir()" >Colorir</button>
<button class="btn btn-info" (click)="campo.descolorir()"
>Descolorir</button>
Usando pipes
Pipes servem para formatar a saída do template, isto é:
{{ nome | uppercase }} -> Saída com nome em maíusculo.
{{ dataAniversario | date }} -> Saída com data formatada.
{{ dataAniversario | date: ‘dd/MM/y’ }} -> Saída com data formatada pela máscara
informada.
{{ preco | number }} -> Saída com número formatado.
{{ preco | number: ‘1.2-2’ }} -> Saída com número formatado pela máscara informada.
{{ troco | currency }} -> Saída com valor formatado pela moeda nacional.
{{ troco | currency: ‘BRL’:true: ‘1.2-2’ }} -> Saída com valor formatado pela moeda nacional
conforme moeda repassada e máscara.
Usando classes de serviço e injeção de dependencia

Classes para tratativas de negócio, comando de criação ng g s nomeClasseService
No exemplo abaixo a classe contém um array de funcionários, método adicionar, que

recepciona um novo funcionário e adiciona na lista, a convenção preconiza que devemos
anotar a classe de serviço com @Injectable, se faz necessário para atender as injeções quando
houver.
import { Injectable } from '@angular/core';
@Injectable()
export class FuncionarioService {
ultimoId = 1;
funcionarios = [{ id: 1, nome: 'João' }];
adicionar(nome: string) {
const funcionario = {
id: ++this.ultimoId,
nome: nome
};
this.funcionarios.push(funcionario);
console.log(JSON.stringify(this.funcionarios));
}
consultar() {
return this.funcionarios;
}
}
Devemos informar no app.module que temos uma classe de serviço para que o mesmo nos
venha prover quando necessário, para tal cadastramos no providers:
import { FuncionarioService } from './funcionario.service';
import { FuncionarioFormComponent } from './funcionario-form/funcionario-
form.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
FuncionarioFormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [
FuncionarioService
],
})
Fazendo uso no componente form, basta que no construtor do componente declaremos um

atributo do tipo do serviço:
import { FuncionarioService } from './../funcionario.service';

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-funcionario-form',
templateUrl: './funcionario-form.component.html',
styleUrls: ['./funcionario-form.component.css']
})
export class FuncionarioFormComponent {
constructor(private funcionarioService: FuncionarioService) { }
this.funcionarioService.adicionar(nome);
}
}
Usando polimorfismo nas classes de serviço e injeção de
dependencia
No próximo exemplo teremos uma nova classe de serviço que extends da FuncionarioService
com sobrescrita do método adicionar:
@Injectable()
export class FuncionarioAbrevidoService extends FuncionarioService {
constructor() {
super();
}
super.adicionar(nome.substr(0, 3) + '...');
}
}
Requer que informemos ao no app.module a maneira de prover o serviço, para tal usamos o
atributo useClass:
providers: [
{ provide: FuncionarioService, useClass: FuncionarioAbrevidoService }
]
Component form permanece inalterado.
Fazendo uso da useFactory

Com useFactory podemos disponibilizar pro provide uma instancia personalizada, no exemplo
abaixo criamos uma serviço que requer um construtor com entrada de um number:
@Injectable()
export class FuncionarioAbrevidoService extends FuncionarioService {
constructor(private numeroCaracteres: number) {

super();
}
super.adicionar(nome.substr(0, this.numeroCaracteres) + '...');
}
}
Ensinamos o app.module como fornecer o novo serviço em posse do novo parametro:

const criarFuncionarioService = () => {
return new FuncionarioAbrevidoService(2);
};
@NgModule({
declarations: [
AppComponent,
FuncionarioFormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [
{ provide: FuncionarioService, useFactory: criarFuncionarioService }
],
})
Component form permanece inalterado.
Fazendo uso da anotação @Inject

Com @Inject é possível no construtor do serviço informarmos que para a instancia em questão
requer um valor especifico, será abordado com a criação de um serviço de logs
import { Inject, Injectable } from '@angular/core';
@Injectable()
export class LogService {
constructor(
@Inject('LogPrefixo') private prefixo: string
) { }
log(msg: string) {
console.log(`${this.prefixo}: ${msg} `);
}
}
Ensinando o app.module:
providers: [
LogService, { provide: 'LogPrefixo', useValue: 'LOG' }
]
Fazendo uso:
import { LogService } from './../LogService';

@Component({
styleUrls: ['./funcionario-form.component.css']
})
constructor(private funcionarioService: FuncionarioService,
private logService: LogService) { }
this.logService.log(`Adicionando ${nome}`);
}
}
Injetando serviço dentro de serviço

Para tal basta que o serviço detenha a anotação @Injectable e que tenha sido ensinado ao
app.module como obter ambos, no exemplo abaixo solicitações o segundo serviço no
construtor:
import { LogService } from './LogService';
import { Injectable } from '@angular/core';
@Injectable()
export class FuncionarioService {
ultimoId = 1;
funcionarios = [{ id: 1, nome: 'João' }];
constructor(private logService: LogService) { }
this.logService.log(`Adicionando ${nome}`);
const funcionario = {
id: ++this.ultimoId,
nome: nome
};
this.funcionarios.push(funcionario);
console.log(JSON.stringify(this.funcionarios));
}
consultar() {
return this.funcionarios;
}
}
Informando provider direto no component

@Component({
styleUrls: ['./funcionario-form.component.css'],
providers: [ FuncionarioService ]
})
constructor(private funcionarioService: FuncionarioService { }
}
}

Instalando Angular Cli - Dois

Enviado por

Dados do documento

Título original

Direitos autorais

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Instalando Angular Cli - Dois

Enviado por

Direitos autorais:

Criando um novo projeto

Iniciando a aplicação recém criada

Iniciando a aplicação com sua porta de escolha

Encerrando a aplicação recém criada

1. Abra o arquivo angular-cli.json

/* Importando o core do angular */

import { AppComponent } from './app.component';

<p>{{ 20 + getIdade() }}</p>

<p> Meu nome é {{ nome }} </p>

Event binding e property binding

Diz-se das interações do usuário com o component.

 Na ação do click fomos encaminhados ao método em questão, são duas maneiras de

<button type="button" class="btn btn-primary" on-click="adicionar()" >Adicionar</button>

$event disponibiliza o elemento html bem como seu atributos.

 Preenchendo o value do component por meio do atributo

 Criando variável de referência (template reference variable)

Declaramos #nomeVariavel como mais um atributo da tag e a mesma ficará disponível e

 Ligando tag entre si por meio do binding

No exemplo abaixo verificamos a qtde de caracteres do atributo, se for igual a zero

 Fazendo event binding e property juntamente (Using Two-Way Data Binding)

Requer importar no app.module.ts

import { FormsModule} from '@angular/forms';

Diretivas ngIf e hidden

*ngIf = * indica que é indispensável pra construção do dom

<div class="alert alert-success" role="alert" [hidden]="!adicionado">

*ngFor = * indica que é indispensável pra construção do dom

<div class="row" style="margin-top: 20px" >

Comunicação entre os componentes

No componente de extensão ts declaramos uma variável de anotação @Input fazendo com

import { Component, OnInit, Input } from '@angular/core';

@Input ("funcionario") funcionario: any;

<div class="row" style="margin-top: 20px" >

Trabalhando com EventEmitter

Trabalhando com stylos de outros jeitos

No exemplo abaixo ao invés de fazer uso do import declaramos em linha as propriedades:

@Input ("funcionario") funcionario: any;

Trabalhando com ngStyle

<div class="card" [ngStyle]="{ 'background-color': 'red' }" >

<div class="card" [ngStyle]="getEstiloCartao()" >

@Input ("funcionario") funcionario: any;

Trabalhando com ngClass

<div class="card" [ngStyle]="getEstiloCartao()" >

Extensões úteis do visual code

Auto Import – Faz o import automaticamente conforme recurso é solicitado.

Bookmarks – Colocar notas no código.

EditorConfig for VS Code – impor estilos de programação, configurações básicas são

HTML Snippets – Auto complete html.

TSLint – Válida os padrões de desenvolvimento bem como erro em tempo de codificação.

Vscode-icons – Gera icones para fácil identificação conforme extensão do arquivo.

<input type="text" class="form-control" [(ngModel)]="nome"

// HostBinding verifica qual componente html esta atrelado a diretiva e

// HostListener aguarda ocorrências informadas no construtor e executa

// HostListener aguarda ocorrências informadas no construtor e executa

@HostListener -> aguarda ocorrências informadas no construtor e executa o método. Exemplo

// HostListener aguarda ocorrências informadas no construtor e executa

// HostListener aguarda ocorrências informadas no construtor e executa

@Input -> Receber a cor como parâmetro

// HostBinding verifica qual componente html esta atrelado a diretiva e

// HostListener aguarda ocorrências informadas no construtor e executa

// HostListener aguarda ocorrências informadas no construtor e executa

<input type="text" class="form-control" [(ngModel)]="nome"

// HostBinding verifica qual componente html esta atrelado a diretiva e

<div class="alert alert-success" role="alert" *ngIf="adicionado">

<button type="button" class="btn btn-primary" [disabled]="nome.length ==

{{ nome | uppercase }} -> Saída com nome em maíusculo.

ngIf = indica que é indispensável pra construção do dom

ngFor = indica que é indispensável pra construção do dom