Embedded Files
Criando modulo
ng g m cursos
Criando componente
ng g c cursos
Criando service(chama backend)
ng g s cursos
Startando o app
ng serve
ng s
build app
ng b --prod
testes
ng t
ng e
Plugin VsCode
Angular v2 TypeScript Snippets
Auto Import
rxjs-snippets
HTML snippets
Icons
Service
A logica de negocio deve ficar na service, o componente serve para pegar os dados e mostrar na tela.
Injeçao de dependencia no Angular.
1. Decorator de injeçao:
@Injectable()
export class CursosService{
}
2. Dentro do component, crie o construtor:
export class CursosComponent implements OnInit{
constructor(_cursosService: CursosService){ //declarando private aqui nao precisa declarar o atributo na classe.
this.cursosService = _cursosService;
}
}
3. Declarar o provedor no appModule:
Importa o CursosService no app.module.ts
providers: [CursosService], //isso significa que estara disponivel para toda a aplicaçao.
Ciclo de vida de componente
Data binding - forma de vincular componente com template, tanto de um lado como de outro.
1. Interpolação - quando quer o valor de variavel de componente exibido no template
{{nome}}
sendo 'nome' o nome da propriedade do componente ou nome do método. Esse nome sera exibido no template.
2. Property binding - Coloca dentro de um elemento HTML ou componente Angular
[prop] = "nome"
sendo prop o nome da propriedade, e "nome" nome do componente ou método
3. Event Binding - Quando quer ouvir evento do template, tipo quando clica no botao - event binding 'click' chamando o metodo 'salvar()' do componente
(click)="salvar()"
4. Two way data binding - mantem o componente e o template atualizados.
[(ngModel)]="nome"
Sendo "nome" o nome da propriedade.
Exemplo Two way data binding
<input type="text"
[value]="nome"
(input)="nome = $event.target.value"
/>
<input type="text"
[ngModel]="nome" //bind de propriedade - Pertence a FormsModule
(ngModelChange)="nome = $event.target.value" //bind de evento
/>
// Two way data binding faz o mesmo que os de cima:
<input type="text" [(ngModel)]="nome">
1. Interpolação
Interpolação de Strings - para adicionar no meio do HTML, algum resultado calculado através de uma expressão de template
Ou um valor de alguma propriedade do componente
Componente: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nome = 'Thiago';
idade = 10;
getIdade() {
return this.idade;
}
}
Template: app.component.html
<h1>Meu nome é {{nome}}</h1>
<h2>Minha idade é {{20 + getIdade()}}</h2>
//expressoes typescripts sao usadas no binding
Tratando Eventos com Angular
Componente:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nome = 'Thiago';
adicionar() {
console.log(`Adicionando ${this.nome}`); //template literals com crase
const numero = Math.round(Math.random() * 100);
this.nome = 'João ' + numero;
}
alterarNome(event: any) {
// console.log(event);
this.nome = event.target.value;
}
}
Para chamar o metodo adicionar no template:
app.component.html
<div class="container">
<div class="alert alert-success" role="alert">
Funcionário adicionado: <strong>{{nome}}</strong>
</div>
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control"
(input)="alterarNome($event)"
value="{{nome}}">
</div>
<button type="button" class="btn btn-primary"
(click)="adicionar()">Adicionar</button>
<button type="button" class="btn btn-primary"
on-click="adicionar()">Adicionar</button>
</div>
O Template chama o método adicionar do component e ai ja mostra o resultado na tela
Template Reference Variables
variável de referencia #nomeInput - pode ser acessada apenas pelo template em qualquer lugar
<div class="container">
<div class="alert alert-success" role="alert">
Funcionário adicionado: <strong>{{nome}}</strong>
</div>
<div class="form-group">
<label>Nome</label>
<input type="text" class="form-control" #nomeInput>
</div>
<button type="button" class="btn btn-primary"
(click)="adicionar(nomeInput.value)">Adicionar</button>
</div>
Quando chamar o metodo adicionar o #nomeInput.value vai como parâmetro
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nome = 'Thiago';
adicionar(nome: string) {
this.nome = nome;
}
}
Decorator HostListener serve para escutar eventos para o metodo de foco, ou seja, so aciona o metodo quando o evento blur acontecer.
@HostListener('blur') aoGanharFoco(){
this.renderer.setStyle(this.elementRef.nativeElement, 'background-color','yellow');
}
Vinculando propriedades do hospedeiro com @HostBinding
adiciona na propriedade style a corDeFundo
@HostBinding('style.backgroundColor') corDeFundo: string;
@HostListener('focus') aoGanharFoco(){
this.corDeFundo = 'green';
}
Page updated
Google Sites
Report abuse