SlideShare uma empresa Scribd logo
1 de 382
Angular 2
Loiane Groner
github.com/loiane
loiane.com
loiane.training
• 10+ XP TI
• Java, JavaScript, Sencha,
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training
• Meus livros:
Introdução
Angular 201
▸ Introdução
AGENDA
▸ Introdução
▸ Componentes e
Templates
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
▸ Serviços
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
▸ Serviços
▸ Formulários
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
▸ Serviços
▸ Formulários
▸ Roteamento
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
▸ Serviços
▸ Formulários
▸ Roteamento
▸ Integração com
servidor
AGENDA
▸ Introdução
▸ Componentes e
Templates
▸ Data binding
▸ Diretivas
▸ Serviços
▸ Formulários
▸ Roteamento
▸ Integração com
servidor
▸ CRUD Mestre-Detalhe
AGENDA
▸ HTML / CSS/ JavaScript
REQUISITOS
▸ HTML / CSS/ JavaScript
▸ NÃO precisa saber AngularJS 1.x
REQUISITOS
ANGULAR 2
▸ https://angular.io
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
▸ Open Source (código no Github)
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
▸ Open Source (código no Github)
▸ Atualmente na versão RC (Release Candidate)
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
▸ Open Source (código no Github)
▸ Atualmente na versão RC (Release Candidate)
▸ Não é continuação da versão 1
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
▸ Open Source (código no Github)
▸ Atualmente na versão RC (Release Candidate)
▸ Não é continuação da versão 1
▸ Foi reescrito
ANGULAR 2
▸ https://angular.io
▸ Parceria Google + Microsoft
▸ Open Source (código no Github)
▸ Atualmente na versão RC (Release Candidate)
▸ Não é continuação da versão 1
▸ Foi reescrito
▸ Uso de padrões web e Web Components
BLOCOS PRINCIPAIS
COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS
TEMPLATE DATA BINDING INJEÇÃO
DEPENDÊNCIA
METADATA
BLOCOS PRINCIPAIS
{}
Componente
Encapsula:
•Template
•Metadata: processamento das classes
•Dado a ser mostrado na tela (Data Binding)
•Comportamento da VIEW
COMPONENTE
{}
Componente Raiz (Root)
{} {}
{}{} {}
COMPONENTE
{} Cabeçalho (Barra de navegação)
{}
Barra
Lateral
{}
Posts
COMPONENTE
{} Cabeçalho (Barra de navegação)
{}
Barra
Lateral
{} Post
{} Post
{} Post
{} Post
COMPONENTE
{} Cabeçalho (Barra de navegação)
{}
Barra
Lateral {} Post
{} Post
{} Post
Star Widget
COMPONENTE
{ }
Componente Backend
COMPONENTE
{ } BACKEND
Componente
Node.JS
Java
.NET
Ruby
Python
Backend
SERVIÇO
{ } BACKEND
Componente
Node.JS
Java
.NET
Ruby
Python
Serviço (Service) Backend
SERVIÇO
{ } BACKEND
Componente
Node.JS
Java
.NET
Ruby
Python
Serviço (Service) Backend
Pode ser injetado
em outras classes
ROTEAMENTO
Router
Responsável pela navegação
DIRETIVA
D
Diretiva
Responsável por modificar elementos DOM
e/ou seu comportamento
DIRETIVA
<input type=”text” autoGrow>
pesquisar…
DIRETIVA
<input type=”text” autoGrow>
Angular
BLOCOS PRINCIPAIS
COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS
TEMPLATE DATA BINDING INJEÇÃO
DEPENDÊNCIA
METADATA
BLOCOS PRINCIPAIS
BLOCOS PRINCIPAIS
COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS
TEMPLATE DATA BINDING INJEÇÃO
DEPENDÊNCIA
METADATA
Ambiente de
Desenvolvimento
Angular 202
▸ Node.JS
O QUE PRECISAMOS INSTALAR
▸ Node.JS
▸ NPM
O QUE PRECISAMOS INSTALAR
▸ Node.JS
▸ NPM
▸ TypeScript
O QUE PRECISAMOS INSTALAR
NODE.JS
https://nodejs.org
TYPESCRIPT
https://www.typescriptlang.org/
TYPESCRIPT
$ npm install -g typescript
TYPESCRIPT
$ npm install -g typescript
$ sudo npm install -g typescript
SOMENTE MAC OU LINUX
TYPESCRIPT
TypeScript
ECMAScript 6
ECMAScript 5
Junho 2015
Novembro 2009
meu-script.ts
transpiler
meu-script.js
ES5
▸ TypeScript
LINGUAGEM
▸ TypeScript
▸ Dart
LINGUAGEM
▸ TypeScript
▸ Dart
▸ ES 6 (ES 2015)
LINGUAGEM
▸ TypeScript
▸ Dart
▸ ES 6 (ES 2015)
▸ ES 5
LINGUAGEM
TYPINGS
$ npm install typings --global
https://github.com/typings/typings
EDITOR DE TEXTO
EDITOR DE TEXTO
JÁ SUPORTA TS
JÁ SUPORTA TS
HTTPS://ATOM.IO/PACKAGES/ATOM-TYPESCRIPT HTTPS://GITHUB.COM/MICROSOFT/TYPESCRIPT-SUBLIME-PLUGIN
Primeira app
Hello, World!
Angular 203
ANGULAR CLI
$ npm install -g angular-cli
https://github.com/angular/angular-cli
Requer node >= 4
ANGULAR CLI
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
ANGULAR SEED - SITE ANGULAR.IO
https://angular.io/docs/ts/latest/quickstart.html
SEED QUE VAMOS USAR PARA OS EXEMPLOS
$ git clone https://github.com/loiane/angular-2-boilerplate.git
PARA EXECUTAR
$ npm install
PARA EXECUTAR
$ npm start
$ npm install
Entendendo o
projeto Hello, World!
Angular 204
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
Pacotes Node, instalados conforme
package.json
pacotes npm Angular 2 +
dependências + extras
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
index.html
Pacotes Node, instalados conforme
package.json
pacotes npm Angular 2 +
dependências + extras
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
index.html
configurações System.JS (módulos)
Pacotes Node, instalados conforme
package.json
pacotes npm Angular 2 +
dependências + extras
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
index.html
Configurações TypeScript
configurações System.JS (módulos)
Pacotes Node, instalados conforme
package.json
pacotes npm Angular 2 +
dependências + extras
ESTRUTURA DO PROJETO - NOSSO EXEMPLO
Código fonte TS + javascript gerado
Arquivos CSS e assets do projeto
index.html
Configurações TypeScript
Configurações Typings
configurações System.JS (módulos)
Pacotes Node, instalados conforme
package.json
pacotes npm Angular 2 +
dependências + extras
INDEX.HTML
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
INDEX.HTML
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
INDEX.HTML
<!-- 3. Renderizando a aplicação -->
<body>
<my-app>Loading...</my-app>
</body>
INDEX.HTML
<!-- 2. Renderizando a aplicação -->
<body>
<my-app>Loading...</my-app>
</body>
Usamos a tag no HTML para
indicar qual componente será
renderizado
APP.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
APP.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Classe TypeScript
APP.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Classe TypeScript
exporta classe para
que outras classes possam
importá-la
APP.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Decorator que
informa que essa classe é um
Componente
APP.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
E para usar esse decorator
precisamos importar a classe Component
do pacote do Angular
APP.COMPONENT.TS
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Metadata: Nome da tag
que será criada
APP.COMPONENT.TS
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
Metadata:
Nome da tag (diretiva) que
será criada
Metadata: template HTML
MAIN.TS
import {bootstrap} from '@angular/platform-browser-dynamic'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
MAIN.TS
import {bootstrap} from '@angular/platform-browser-dynamic'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
inicializa a
app instanciando o
AppComponent
MAIN.TS
import {bootstrap} from '@angular/platform-browser-dynamic'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
inicializa a
app instanciando o
AppComponent
Como
exportamos a classe, podemos
importar aqui
MAIN.TS
import {bootstrap} from '@angular/platform-browser-dynamic'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
inicializa a
app instanciando o
AppComponent
Como
exportamos a classe, podemos
importar aqui
não precisa do .ts
DEPENDÊNCIAS - SYSTEMJS.CONFIG
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
DEPENDÊNCIAS - SYSTEMJS.CONFIG
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
Os arquivos .js compilados do
TypeScript que estão no diretório app
que serão executados no browser
DEPENDÊNCIAS - SYSTEMJS.CONFIG
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
Os arquivos .js compilados do
TypeScript que estão no diretório app
que serão executados no browser
app/main.js é responsável
por inicializar a app
DEPENDÊNCIAS - SYSTEMJS.CONFIG
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common'
ackageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
DEPENDÊNCIAS - SYSTEMJS.CONFIG
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common'
ackageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
Carrega os arquivos do Angular 2
Ainda não existe um padrão, pode usar qualquer
um:
SISTEMA DE MÓDULOS
Ainda não existe um padrão, pode usar qualquer
um:
▸ System.JS
SISTEMA DE MÓDULOS
Ainda não existe um padrão, pode usar qualquer
um:
▸ System.JS
▸ Webpack
SISTEMA DE MÓDULOS
Ainda não existe um padrão, pode usar qualquer
um:
▸ System.JS
▸ Webpack
▸ Browserify
SISTEMA DE MÓDULOS
Ainda não existe um padrão, pode usar qualquer
um:
▸ System.JS
▸ Webpack
▸ Browserify
▸ JSPM
SISTEMA DE MÓDULOS
PARA EXECUTAR
$ npm install
PARA EXECUTAR
$ npm start
$ npm install
Criando um
Componente
Angular 205
MEU-PRIMEIRO.COMPONENT.TS
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
meu-primeiro.component.ts
Palavras separadas por “-“
Ponto
“component" -> para indicar que é um componente
Ponto
ts -> extensão typescript
MEU-PRIMEIRO.COMPONENT.TS
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
import {Component} from ‘@angular/core';
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
})
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'meu-primeiro-component',
})
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
MEU-PRIMEIRO.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'meu-primeiro-component',
})
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
nome da DIV a ser criada
MEU-PRIMEIRO.COMPONENT.TS
import {Component} from ‘@angular/core';
@Component({
selector: 'meu-primeiro-component',
template: '<h2>Meu primeiro componente Angular 2!</h2>'
})
export class MeuPrimeiroComponent {}
Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
APP.COMPONENT.TS - USANDO O COMPONENTE
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Angular 2 Boilerplate</h1>
<p>Hello World!</p>
<meu-primeiro-component></meu-primeiro-component>
`
})
export class AppComponent {
}
APP.COMPONENT.TS - USANDO O COMPONENTE
APP.COMPONENT.TS - USANDO O COMPONENTE
Cadê o componente????
APP.COMPONENT.TS - USANDO O COMPONENTE
import {Component} from ‘@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Angular 2 Boilerplate</h1>
<p>Hello World!</p>
<meu-primeiro-component></meu-primeiro-component>
`,
directives: [MeuPrimeiroComponent]
})
export class AppComponent {
}
APP.COMPONENT.TS - USANDO O COMPONENTE
TEXT
AO CRIAR UM COMPONENTE NO ANGULAR - CIDAR
DICA
▸ Class (Criar a classe)
▸ Import
▸ Decorate (Decorar a classe)
▸ Alterar
▸ Repetir
Templates
Angular 206
TEMPLATES - USANDO INTERPOLATION
import {Component} from ‘@angular/core';
@Component({
selector: ‘cursos',
template: `
<p>Olá, meu nome é {{ nome }}<p>
`
})
export class CursosComponent {
nome = 'Loiane';
}
TEMPLATES - USANDO INTERPOLATION
import {Component} from ‘@angular/core';
@Component({
selector: ‘cursos',
template: `
<p>Olá, meu nome é {{ nome }}<p>
`
})
export class CursosComponent {
nome = 'Loiane';
}
Interpolation
TEMPLATES - USANDO INTERPOLATION
import {Component} from ‘@angular/core';
@Component({
selector: ‘cursos',
template: `
<p>Olá, meu nome é {{ nome }}<p>
`
})
export class CursosComponent {
nome = 'Loiane';
}
Interpolation
TEMPLATES - USANDO INTERPOLATION
TEMPLATES - DIRETIVAS
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
TEMPLATES - DIRETIVAS
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
TEMPLATES - DIRETIVAS
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
Diretiva ngFor
Itera uma coleção/array
TEMPLATES - DIRETIVAS
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
Diretiva ngFor
Itera uma coleção/array
Variável local curso criada
TEMPLATES - DIRETIVAS
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
Diretiva ngFor
Itera uma coleção/array
Variável local curso criada
Interpolation da variável
local curso
TEMPLATES - DIRETIVAS
TEMPLATES - DIRETIVAS
@Component({
selector: 'cursos-list',
/*template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`,*/
templateUrl: 'cursos.component.html',
providers: [CursosService]
})
export class CursosComponent {
}
TEMPLATES EM ARQUIVO SEPARADO
Guia Angular 2
https://angular.io/styleguide
Serviços (Services) e
Injeção de
dependência (DI)
Angular 207
SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW
import {Component} from '@angular/core';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos = ['Java', 'Angular 2', 'Estrutura de Dados'];
}
Suponha que vamos obter
esses valores de um servidor.
Melhor prática seria separar a
lógica de negócio da VIEW
ARQUITETURA
{ } BACKEND
Componente
Node.JS
Java
.NET
Ruby
Python
Serviço (Service) Backend
CRIANDO UM SERVIÇO (SERVICE)
import { Injectable } from '@angular/core';
@Injectable()
export class CursosService {
getCursos() : string[] {
return ['Java', 'Angular 2', 'Estrutura de Dados'];
}
}
Crie um arquivo dentro de app/cursos chamado cursos.service.ts
Repare na convenção de nomes
CRIANDO UM SERVIÇO (SERVICE)
import { Injectable } from '@angular/core';
@Injectable()
export class CursosService {
getCursos() : string[] {
return ['Java', 'Angular 2', 'Estrutura de Dados'];
}
}
Crie um arquivo dentro de app/cursos chamado cursos.service.ts
Repare na convenção de nomes
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
import
do serviço
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
import
do serviço
atributo local a ser
populado
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
import
do serviço
atributo local a ser
populado
Injeção de
Dependência
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
import
do serviço
atributo local a ser
populado
Injeção de
Dependência
Chamada do
método do serviço
INJEÇÃO DE DEPENDÊNCIA
Oops!
INJEÇÃO DE DEPENDÊNCIA
Oops!
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`,
providers: [CursosService]
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`,
providers: [CursosService]
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
Precisamos
informar ao Angular que
queremos que injete a
classe CursosService
nesse componente
USANDO INJEÇÃO DE DEPENDÊNCIA
import {Component} from '@angular/core';
import {CursosService} from './cursos.service';
@Component({
selector: 'cursos',
template: `
<h3>Cursos {{ tituloCursos }}</h3>
<ul>
<li *ngFor="let curso of cursos">
{{ curso }}
</li>
</ul>
`,
providers: [CursosService]
})
export class CursosComponent {
tituloCursos = 'loiane.training';
cursos;
constructor(cursosService: CursosService){
this.cursos = cursosService.getCursos();
}
}
Precisamos
informar ao Angular que
queremos que injete a
classe CursosService
nesse componente
O provider cria/provém
(fornece) uma instância
da classe
INJEÇÃO DE DEPENDÊNCIA
Dica Produtividade:
Code Snippets
Angular 208
TEXT
SNIPPETS PARA CRIAÇÃO DO ESQUELETO DA CLASSE ANGULAR2
DICA
▸ VS Code: https://github.com/johnpapa/vscode-angular2-
snippets
▸ Atom: https://atom.io/packages/angular-2-typeScript-
snippets
Property Binding
(Binding de propriedades)
+ Interpolation
Angular 209
DATA BINDING
<TEMPLATE>
{COMPONENT}
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"
INTERPOLATION
INTERPOLATION
INTERPOLATION
▸ Valor do Component para o Template
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
▸ <h3>{{ url }}</h3>
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
▸ <h3>{{ url }}</h3>
▸ Permite uso de algumas expressões, como:
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
▸ <h3>{{ url }}</h3>
▸ Permite uso de algumas expressões, como:
▸ {{ 1 + 1}}
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
▸ <h3>{{ url }}</h3>
▸ Permite uso de algumas expressões, como:
▸ {{ 1 + 1}}
▸ {{ getValor() }}
INTERPOLATION
▸ Valor do Component para o Template
▸ É uma forma de property binding
▸ <h3>{{ url }}</h3>
▸ Permite uso de algumas expressões, como:
▸ {{ 1 + 1}}
▸ {{ getValor() }}
▸ {{ minhaVar && minhaVar2 }}
INTERPOLATION
INTERPOLATION
<h3 [textContent]="url"></h3>
<h3>{{ url }}</h3>
==
▸ Valor do Component para o Template
PROPERTY BINDING
▸ Valor do Component para o Template
▸ Usa-se colchetes <img [src]="urlImg"/>
PROPERTY BINDING
▸ Valor do Component para o Template
▸ Usa-se colchetes <img [src]="urlImg"/>
▸ Formato padrão é através de bind-
nomePropriedade <img bind-src="urlImg"/>
PROPERTY BINDING
▸ Valor do Component para o Template
▸ Usa-se colchetes <img [src]="urlImg"/>
▸ Formato padrão é através de bind-
nomePropriedade <img bind-src="urlImg"/>
▸ Quando não existe uma propriedade no elemento,
usa-se [attr.colspan]
PROPERTY BINDING
PROPERTY BINDING
PROPERTY BINDING
Todas as imagens tem o
mesmo resultado
Class e Style Binding
(Binding de classes e estilos)
Angular 210
CLASS E STYLE BINDING - EXEMPLO 01
CLASS E STYLE BINDING - EXEMPLO 01
Variável local
chamada class
CLASS E STYLE BINDING - EXEMPLO 01
Variável local
chamada class
Property binding
CLASS E STYLE BINDING - EXEMPLO 02
CLASS E STYLE BINDING - EXEMPLO 02
CLASS E STYLE BINDING - EXEMPLO 02
Só recebe a
class caso a
expressão seja
verdadeira
CLASS E STYLE BINDING - EXEMPLO 03
CLASS E STYLE BINDING - EXEMPLO 03
Mostra o estilo
ou não?
CLASS E STYLE BINDING - EXEMPLO 03
Mostra o estilo
ou não?
Expressão com o
valor da variável
Event Binding
(Binding de eventos)
Angular 211
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
▸ Valor do Template para o Componente
EVENT BINDING
▸ Valor do Template para o Componente
▸ Usa-se parênteses <button (click)=“onClick()”/>
EVENT BINDING
▸ Valor do Template para o Componente
▸ Usa-se parênteses <button (click)=“onClick()”/>
▸ Método “handler" declarado no Componente
EVENT BINDING
▸ Valor do Template para o Componente
▸ Usa-se parênteses <button (click)=“onClick()”/>
▸ Método “handler" declarado no Componente
▸ Forma canônica <button on-click=“onClick()”/>
EVENT BINDING
EVENT BINDING - EXEMPLO 01
EVENT BINDING - EXEMPLO 01
Evento a ser
"escutado"
EVENT BINDING - EXEMPLO 01
Evento a ser
"escutado"
Método/Função a
ser executada
EVENT BINDING - EXEMPLO 01
Evento a ser
"escutado"
Método/Função a
ser executada
EVENT BINDING - EXEMPLO 01
Evento a ser
"escutado"
Método/Função a
ser executada
EVENT BINDING - EXEMPLO 02
EVENT BINDING - EXEMPLO 02
$event é do tipo
evento DOM
EVENT BINDING - EXEMPLO 02
$event é do tipo
evento DOM
acesso a variável
local declarada
acesso a variável
local declarada
EVENT BINDING - EXEMPLO 02
EVENT BINDING - EXEMPLO 02
$event tem
propriedades como
event.target e
event.target.value
EVENT BINDING - EXEMPLO 03
EVENT BINDING - EXEMPLO 03
EVENT BINDING - EXEMPLO 03
Plugin ATOM para mostrar cor: https://atom.io/packages/pigments
DICA: USANDO CSS NO COMPONENTE
DICA: USANDO CSS NO COMPONENTE
Note a convenção de
nomenclatura
TEXT
QUAIS EVENTOS POSSO USAR?
DICA
▸ Lista com todos os eventos
▸ https://developer.mozilla.org/en-US/docs/Web/Events
Two-way data binding
Angular 212
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
DATA BINDING
<TEMPLATE>
{COMPONENT}
{{ valor }}
[propriedade]="valor"
(evento)="handler"
[(ngModel)]="propriedade"
▸ Valor do Template para o Componente e vice-versa
TWO-WAY DATA BINDING
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
TWO-WAY DATA BINDING
TWO-WAY DATA BINDING
Como manter o template e o
componente atualizados?
TWO-WAY DATA BINDING
Como manter o template e o
componente atualizados?
TWO-WAY DATA BINDING
Como manter o template e o
componente atualizados?
TWO-WAY DATA BINDING
Como manter o template e o
componente atualizados?
TWO-WAY DATA BINDING
Property binding +
event binding
Como manter o template e o
componente atualizados?
TWO-WAY DATA BINDING COM NGMODEL
Aplicando o ngModel
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
▸ Forma mais simples é fazer o binding no ngModel
TWO-WAY DATA BINDING
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
▸ Forma mais simples é fazer o binding no ngModel
▸ Usa-se sintaxe de binding de eventos +
propriedade:
TWO-WAY DATA BINDING
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
▸ Forma mais simples é fazer o binding no ngModel
▸ Usa-se sintaxe de binding de eventos +
propriedade:
▸ <input type="text" [(ngModel)]="nome" />
TWO-WAY DATA BINDING
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
▸ Forma mais simples é fazer o binding no ngModel
▸ Usa-se sintaxe de binding de eventos +
propriedade:
▸ <input type="text" [(ngModel)]="nome" />
▸ Forma canônica é
TWO-WAY DATA BINDING
▸ Valor do Template para o Componente e vice-versa
▸ Usa-se binding de eventos + propriedades
▸ Forma mais simples é fazer o binding no ngModel
▸ Usa-se sintaxe de binding de eventos +
propriedade:
▸ <input type="text" [(ngModel)]="nome" />
▸ Forma canônica é
▸ <input type="text" bindon-ngModel="nome" />
TWO-WAY DATA BINDING
TWO-WAY DATA BINDING
TWO-WAY DATA BINDING
TWO-WAY DATA BINDING
Two-way
data binding com
NgModel
TWO-WAY DATA BINDING
Two-way
data binding com
NgModel
Forma canônica
SINTAXE BANANA IN A BOX
SINTAXE “BANANA NA CAIXA"
[()]
TWO-WAY DATA BINDING
TWO-WAY DATA BINDING
Two-way data
binding com objetos
Reusando Componentes
Input properties
Angular 213
CRIANDO COMPONENTES REUTILIZÁVEIS
CRIANDO COMPONENTES REUTILIZÁVEIS
Objetivo: criar um
componente onde podemos criar
propriedades customizadas para que outros
componentes possam usar o mesmo
CRIANDO COMPONENTES REUTILIZÁVEIS
1 - Criamos o componente normalmente
INPUT PROPERTIES
INPUT PROPERTIES
2 - Usamos a anotação @Input nos atributos que
queremos expor
INPUT PROPERTIES
INPUT PROPERTIES
3 - Caso queira expor o atributo/propriedade com
nome diferente, podemos passar como parâmetro
para o @input
INPUT PROPERTIES
4 - Caso não queria usar o @Input(), pode declarar
como meta-dado no @Component também
QUAL USAR? METADADO OU ANOTAÇÃO?
Gosto
pessoal.
Porém, o @Input é mais
notável
Gosto pessoal.
Porém, o @Input é mais notável
visualmente!
Reusando Componentes
Output properties
Angular 214
CRIANDO COMPONENTES REUTILIZÁVEIS
CRIANDO COMPONENTES REUTILIZÁVEIS
Componente customizado.
Objetivo: disparar um evento “mudou” toda vez que o usuário clicar
nos botões de + ou -.
Evento recebe novo valor do input.
CRIANDO COMPONENTES REUTILIZÁVEIS
CRIANDO COMPONENTES REUTILIZÁVEIS
Objetivo: poder escutar eventos
customizados, ou seja, criados por nós
CRIANDO COMPONENTES REUTILIZÁVEIS
1 - Criamos o componente normalmente
CRIANDO COMPONENTES REUTILIZÁVEIS
1 - Criamos o componente normalmente
CRIANDO COMPONENTES REUTILIZÁVEIS
2 - Criamos um atributo do tipo EventEmitter (que
irá emitir o evento “mudou”.
Anotamos com o @Output para mostrar que o
atributo será exposto como valor de saída do
Component
CRIANDO COMPONENTES REUTILIZÁVEIS
3 - Emitimos o evento com o valor que desejamos
expor
CRIANDO COMPONENTES REUTILIZÁVEIS
4 - Também podemos expor o evento com um nome
diferente do que utilizado internamente.
CRIANDO COMPONENTES REUTILIZÁVEIS
5 - O Output também pode ser usado em forma de
metadado
Ciclo de vida do
Componente
Angular 215
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
ngAfterContentChecked5 a cada verificação de conteúdo inserido
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
ngAfterContentChecked5 a cada verificação de conteúdo inserido
ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho
LIFE CYCLE HOOKS
# EVENTO (HOOKS) QUANDO?
ngOnChanges1 antes #2 e quando valor property-binding é atualizado
ngOnInit2 quando Component é inicializado
ngDoCheck3 a cada ciclo de verificação de mudanças
ngAfterContentInit4 depois de inserir conteúdo externo na view
ngAfterContentChecked5 a cada verificação de conteúdo inserido
ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho
ngOnDestroy7 antes da diretiva/component ser destruído
LIFE CYCLE HOOKS
LIFE CYCLE HOOKS
Note o nome da interface e
o nome do método a ser
implementado:
ng + NomeInterface
Acesso de variáveis locais do
Template com ViewChild
Angular 216
VIEW CHILD
Mudanças Angular RC 5
ngModule
Angular 2xx
TEXT
O QUE MUDOU NO RC5?
▸ Introdução do conceito de ngModule
▸ Breaking change a partir do RC 6 / Release
▸ Forma de organizar a aplicação em módulos
▸ Toda a app precisa de um módulo raiz (root)
▸ É possível também criar módulos de features
TEXT
COMO ATUALIZAR O PROJETO PARA O RC 5?
▸ 1 - Atualizar a dependencies conforme https://github.com/
angular/quickstart/blob/master/package.json
▸ 2 - Substituir o app.component.spec.ts (https://
github.com/angular/quickstart/blob/master/app/
app.component.spec.ts)
▸ 3 - Substituir o main.ts (https://github.com/angular/
quickstart/blob/master/app/main.ts)
▸ 4 - Criar arquivo app.module.ts (https://github.com/
angular/quickstart/blob/master/app/app.module.ts)
▸ 5 - Refatorar!
TEXT
COMO ATUALIZAR O PROJETO PARA O RC 5?
> npm outdated
> npm update
TEXT
COMO ATUALIZAR O PROJETO PARA O RC 5?
> npm install -g npm-check-updates
> npm-check-updates -u
> npm update
TEXT
COMO ATUALIZAR O PROJETO PARA O RC 5?
> npm install -g npm-check-updates
> npm-check-updates -u
> npm update
atualiza o package.json
também
APP.MODULE.TS (NOVO ARQUIV0)
APP.MODULE.TS (NOVO ARQUIV0)
Import do decorator e
módulo obrigatório para a
app
APP.MODULE.TS (NOVO ARQUIV0)
Import do decorator e
módulo obrigatório para a
app
Import do
componente principal
APP.MODULE.TS (NOVO ARQUIV0)
Import do decorator e
módulo obrigatório para a
app
Import do
componente principal
Import das classes
APP.MODULE.TS (NOVO ARQUIV0)
APP.MODULE.TS (NOVO ARQUIV0)
imports: módulos a serem
importados
APP.MODULE.TS (NOVO ARQUIV0)
imports: módulos a serem
importados
declarations: directives
APP.MODULE.TS (NOVO ARQUIV0)
imports: módulos a serem
importados
declarations: directives
providers (serviços)
APP.MODULE.TS (NOVO ARQUIV0)
imports: módulos a serem
importados
declarations: directives
providers (serviços)
Componente
principal da app
MUDOU O CONTEÚDO DO MAIN.TS
MUDOU O CONTEÚDO DO MAIN.TS
não faz mais boot
pela classe, e sim módulo
principal
NOS COMPONENTES
NOS COMPONENTES
não precisa mais do
import e nem do meta-dado
directives pra usar a tag cursos
não precisa mais do
import e nem do meta-dado
directives pra usar a tag cursos
É POSSÍVEL CRIAR MÓDULO DE FEATURE
É POSSÍVEL CRIAR MÓDULO DE FEATURE
usa-se o
CommonModule e não
BrowserModule
É POSSÍVEL CRIAR MÓDULO DE FEATURE
usa-se o
CommonModule e não
BrowserModule
classes a serem expostas
em outros módulos
É POSSÍVEL CRIAR MÓDULO DE FEATURE
É POSSÍVEL CRIAR MÓDULO DE FEATURE
precisa importar pois
está sendo usada/declarada no
construtor
precisa importar pois
está sendo usada/declarada no
construtor
É POSSÍVEL CRIAR MÓDULO DE FEATURE
precisa importar pois
está sendo usada/declarada no
construtor
precisa importar pois
está sendo usada/declarada no
construtor
não precisa mais do meta-
dado provider
REFATORANDO
REFATORANDO
podemos importar o
módulo cursos e usá-lo!
PROJETO DATA-BINDING
PROJETO DATA-BINDING
two-way data-binding ([ngModel])
precisa do import
Angular CLI: Instalação e
criação de projetos: ng new,
ng init e ng serve
Angular 217
ANGULAR CLI
$ npm install -g angular-cli
https://github.com/angular/angular-cli
Requer node >= 4
ANGULAR CLI: CRIANDO PROJETO
> ng new NomeProjeto
> cd NomeProjeto
> ng serve
ANGULAR CLI: CRIANDO PROJETO
> ng new NomeProjeto
> cd NomeProjeto
> ng serve
Cria um projeto
angular 2 e executa npm
install
ANGULAR CLI: CRIANDO PROJETO
> ng new NomeProjeto
> cd NomeProjeto
> ng serve
Cria um projeto
angular 2 e executa npm
install
“serve" o
projeto ao browser.
Similar ao npm start que
estávamos executando
ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE
> mkdir NomeProjeto
> cd NomeProjeto
> ng init
> ng serve
ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE
> mkdir NomeProjeto
> cd NomeProjeto
> ng init
> ng serve
Cria um diretório
ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE
> mkdir NomeProjeto
> cd NomeProjeto
> ng init
> ng serve
Cria um diretório
Cria um
projeto angular 2 no diretório
existente
Angular CLI:
Criando components, services:
ng generate
Angular 218
ANGULAR CLI: CRIANDO COMPONENTS
> cd NomeProjeto
> ng generate component meu-primeiro
> ng g component meu-primeiro
ANGULAR CLI: CRIANDO COMPONENTS
> cd NomeProjeto
> ng generate component meu-primeiro
> ng g component meu-primeiro
ANGULAR CLI: CRIANDO COMPONENTS
ANGULAR CLI: CRIANDO SERVIÇOS
> cd NomeProjeto
> ng generate service meu-primeiro/
meu-primeiro
ANGULAR CLI: CRIANDO SERVIÇOS
> cd NomeProjeto
> ng generate service meu-primeiro/
meu-primeiro
Cria um serviço no
módulo meu-primeiro
ANGULAR CLI: CRIANDO SERVIÇOS
ANGULAR CLI: CRIANDO SERVIÇOS
Cria um serviço no
módulo meu-primeiro
Arquivo spec.ts é para testes
unitários
TEXT ANGULAR 2 STYLE GUIDE
TEXT ANGULAR 2 STYLE GUIDE
TEXT ANGULAR 2 STYLE GUIDE
TEXT ANGULAR 2 STYLE GUIDE
Arquivos são gerados
usando o padrão de
nomenclatura e boas práticas
segundo o style guide
ANGULAR CLI: CRIANDO ARQUIVOS
Tipo Arquivo Comando
Component ng g component meu-component
Service ng g service meu-servico
Directive ng g directive minha-diretiva
Pipe ng g pipe meu-pipe
Class ng g class minha-classe
Interface ng g interface minha-interface
Enum ng g enum meu-enum
Atualizando o angular-cli
para RC5 e webpack
Angular 2xx
ANGULAR CLI: UPDATE RC5
▸ Situação atual (agosto/2016):
▸ upgrade do build para o webpack (estava usando o
broccoli)
▸ Versão ainda em beta (1.0.0-beta.11-webpack.2)
▸ é a versão que usa RC5
▸ Atualize o Node e o NPM
▸ Node 6
▸ NPM 3
ANGULAR CLI: UPDATE RC5
> npm uninstall -g angular-cli
> npm cache clean
> npm install -g angular-cli@webpack
ANGULAR CLI: UPDATE RC5
> ng new meu-projeto
> cd meu-projeto
> rm -rf node_modules dist tmp typings
> npm install --save-dev angular-cli@webpack
> ng init
ANGULAR CLI: UPDATE RC5
▸ Depois da atualização, os seguintes arquivos podem ser
removidos:
▸ ./config/karma-test-shim.js
▸ ./config/environment.js
▸ ./src/system-config.ts
▸ ./angular-cli-build.js
▸ ./typings.json
▸ ./.clang-format (se existir)
Angular CLI:
Usando Sass, Less ou Stylus
Angular 219
ESCOLHENDO O PRÉ-PROCESSADOR
> ng new meu-projeto --style=sass
> ng new meu-projeto --style=less
> ng new meu-projeto --style=stylus
AO GERAR UM NOVO PROJETO
ESCOLHENDO O PRÉ-PROCESSADOR
> ng set defaults.styleExt scss
> ng set defaults.styleExt less
> ng set defaults.styleExt styl
EM UM PROJETO EXISTENTE
AO CRIAR UM NOVO COMPONENTE
Angular CLI:
ng lint, ng test, ng e2e
Angular 220
TEXT
NG LINT
TEXT
NG LINT
TEXT
NG TEST
Angular CLI:
Estrutura do projeto
Angular 221
TEXT
PRA QUE SERVE O ANGULAR CLI?
▸ Cria toda a estrutura do projeto
▸ Gera página HTML inicial, arquivos Typescript iniciais, arquivos CSS
e arquivos de testes unitários
▸ Cria arquivo package.json com todas as dependências do Angular 2
▸ Instala todas as dependências do node (npm install)
▸ Configura o Karma para executar os testes unitários com Jasmine
▸ Configura Protractor para executar os testes end-to-end (E2E)
▸ Inicializa um repositório git no projeto e faz o commit inicial
▸ Cria todos os arquivos necessários para fazer o build da aplicação
para produção
TEXT
ESTRUTURA DIRETÓRIOS DO PROJETO
▸ config – diretório que contém configuração para
deploy/build e teste.
▸ dist – diretório onde é gerado o build da aplicação.
Ignorado pelo git
▸ e2e – diretório que contém os scripts para testes end-
to-end
▸ node_modules – diretório que contém os pacotes npm
da app (package.json). Também ignorado pelo git
▸ public – diretório genérico que contém um
arquivo .npmignore
▸ src – diretório do código fonte da aplicação. Contém
código typescript/javascript, CSS, imagens e
templates HTML.
TEXT ESTRUTURA CÓDIGO FONTE (SCR)
▸ index.html - página HTML principal da aplicação, que
faz o startup.
▸ main.ts é o código que carrega a aplicação. Somente
deve ser editado caso seja necessário adicionar mais
módulos na app.
▸ system-config.ts configura as dependências da app.
Bibliotecas e extensões angular 2 devem ser
adicionadas aqui para que sejam carregadas na app.
▸ tsconfig.json contém as configurações do
compilador do typescript
▸ typings.d.ts é usado para declarações de tipos que a
app usa
▸ index.ts contém o export de todos os arquivos do
módulo
TEXT
A DOCUMENTAÇÃO É A SUA MELHOR AMIGA!
DESENVOLVA O HÁBITO DE LER OS DOCS!
LEMBRE-SE SEMPRE DE CONSULTAR A DOCUMENTAÇÃO!
▸ https://angular.io/docs
TEXT
DEPENDENCIES X DEVDEPENDENCIES
ESTRUTURA PACKAGE.JSON
▸ dependencies: dependências necessárias para
executar a aplicação.
▸ devDependencies: dependências necessárias para
desenvolver a aplicação (não necessárias após o
build de produção).
TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES
TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES
▸ @angular/core - pacote principal do framework Angular 2. Contém decorators e metadados,
Component, Directive, injeção de dependência e os hooks de ciclo de vida do Component.
▸ @angular/common - Serviços, pipes e diretivas comuns fornecidas pelo time de dev do Angular.
▸ @angular/compiler - Template de compilação do angular. Entende o código dos templates e
converte em código que faz a app ser executada e renderizada. Desenvolvedores não
interagem com esse pacote diretamente (apenas usamos seu código).
▸ @angular/forms - contém todo o código para construção de formulários no angular 2.
▸ @angular/platform-browser - contém todo o código relacionado ao DOM e ao browser,
especialmente as parte que ajudam a renderizar o DOM. Esse pacote também contém o método
para fazer o bootstrap da aplicação para builds de produção que pré-compila os templates.
▸ @angular/platform-browser-dynamic - Contém os Providers e o método para iniciar as
aplicações que compilam templates no lado cliente. Não usa compilação offline. Usada para
fazer bootstrap durante desenvolvimento e exemplos plunker.
▸ @angular/http - fornece o cliente HTTP.
▸ @angular/router - classes de roteamento.
TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS
▸ es6-shim - biblioteca que permite compatibilidade de engines JS antigas com a
especificação do ES 2015, ou seja, emula as funcionalidades do ES 2015 em
browsers que suportam somente ES5.
▸ reflect-metadata - dependência compartilhada entre o Angular e o compilador
TypeScript. Permite o uso de decorators no código (annotations). Isso permite ao
desenvolvedores fazer upgrade no TypeScript sem precisar de fazer upgrade no
Angular. Esse é o motivo desta ser uma dependência da aplicação e não do
angular.
▸ rxjs - extensão para a especificação dos Observables (programação assíncrona).
Reactive extensions for JavaScript.
▸ system.js - módulo para carregamento dinâmico compatível com a especificação
de módulos do ES 2015. Como alternativa também podemos usar o Webpack. O
SystemJS é o módulo utilizando oficialmente na documentação do Angular 2.
▸ zone.js - extensão (plugins) útil para tarefas assíncronas (chamadas de Zones).
TEXT ESTRUTURA PACKAGE.JSON: DEVDEPENDENCIES
TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS
▸ angular-cli: ferramenta de linha de comando para gerenciar projetos angular 2.
▸ codelyzer: lint (análise de código) para angular 2
▸ ember-cli-inject-live-reload: ferramenta de live reload
▸ jasmine-core: arquivos principais jasmine para node.js
▸ jasmine-spec-reporter: relatório em tempo real para BDD com Jasmine
▸ karma: ferramenta de testes que cria um web server e executa código de teste em cada um
dos browsers conectados
▸ karma-chrome-launcher: launcher do karma para o chrome
▸ karma-jasmine: adaptador para o jasmine
▸ protractor: framework de teste end to end (integração) para angular
▸ ts-node: módulo typescript para node.js
▸ tslint: lint (análise de código) para typescript
▸ typescript: compilador typescript
▸ typings: gerenciador de arquivos de definição para typescript
Angular CLI:
Gerando o build de produção
Angular 222
GERANDO O BUILD DE DESENVOLVIMENTO
> cd NomeProjeto
> ng build --target=development --environment=dev
> ng build --dev --e=dev
> ng build --dev
> ng build
TEXT
BUILD DE DEV
▸ Útil para integrar o código do
Angular 2 com o projeto de
backend (PHP, Java, .NET,
Python, Ruby etc)
▸ Código que dá pra debugar
▸ Apenas copia o código de
desenvolvimento para o
diretório dist (apenas
código .js)
GERANDO O BUILD DE PRODUÇÃO
> cd NomeProjeto
> ng build --target=production --environment=prod
> ng build --prod --env=prod
> ng build --prod
TEXT
BUILD DE PROD
▸ Obfusca e minifica o código
JS da aplicação
▸ Arquivos CSS e templates
HTML não são minificados
▸ diretório vendor contém
todo o código Angular 2 +
dependências
TEXT
CRIAR ARQUIVO .EMBER-CLI NO PROJETO
MUDAR O DIRETÓRIO DE OUTPUT
TEXT
CRIAR ARQUIVO .EMBER-CLI NO PROJETO
MUDAR O DIRETÓRIO DE OUTPUT
TOMAR CUIDADO POIS SE O DIRETÓRIO JÁ EXISTIR, O MESMO SERÁ DELETADO
E RECRIADO
TEXT
EXEMPLO DE ARQUITETURA DOS PROJETOS
TEXT
EXEMPLO DE ARQUITETURA DOS PROJETOS
WORKSPACE DO PROJETO ANGULAR2 + JAVA
TEXT
EXEMPLO DE ARQUITETURA DOS PROJETOS
WORKSPACE DO PROJETO ANGULAR2 + JAVA
OUTPUT BUILD PROJETO ANGULAR 2
TEXT
EXEMPLO DE ARQUITETURA DOS PROJETOS
WORKSPACE DO PROJETO ANGULAR2 + JAVA
OUTPUT BUILD PROJETO ANGULAR 2
PROJETO ANGULAR 2
Angular CLI:
instalando bibliotecas
(bootstrap, jquery, semantic ui, etc)
Angular 223
INSTALANDO A DEPENDÊNCIA
> cd NomeProjeto
> npm install ng2-bootstrap --save
> npm install moment --save
https://github.com/valor-software/ng2-bootstrap
TEXT
PROJETO/SRC/SYSTEM-CONFIG.TS
TEXT
INDEX.HTML
Diretivas: Introdução
Angular 224
TEXT
DIRETIVAS SÃO INSTRUÇÕES
O QUE SÃO DIRETIVAS?
TEXT
DIRETIVAS SÃO INSTRUÇÕES
O QUE SÃO DIRETIVAS?
"Itere todos os cursos, e a cada iteração, atribua o
valor do elemento atual à uma variável curso.
Replique também o elemento <li> com valor da
variável curso a cada iteração."
TEXT
DIRETIVAS SÃO INSTRUÇÕES
O QUE SÃO DIRETIVAS?
TEXT
DIRETIVAS SÃO INSTRUÇÕES
O QUE SÃO DIRETIVAS?
“Crie um componente do Tipo (classe) especificado
e renderize a view (template) desse componente
nesse lugar“.
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*ngIf
TEXT
TIPOS DE DIRETIVAS
DIRETIVAS ESTRUTURAIS
Interagem com a view e
modificam a estrutura do DOM
e/ou código HTML
*ngFor
*ngIf
DIRETIVAS DE ATRIBUTOS
Interagem com o elemento em
que foram aplicadas
ng-class
ng-style
*ngIf
Angular 225
TEXT
CONDICIONAL IF
TEXT
*NGIF
TEXT
[DICA] ALTERNATIVA: HIDDEN
TEXT
*NGIF X HIDDEN
[hidden] *ngIf
recomendado para árvore de
elementos pequenas
recomendado para árvore de
elementos grandes
TEXT
*NGIF X HIDDEN - EXCEÇÃO
[hidden]
é menos custoso usar [hidden] caso o custo de
criar a árvore de elementos seja grande
ngSwitch e *ngSwitchCase
Angular 226
TEXT
CONDICIONAL SWITCH-CASE
TEXT
NGSWITCH E *NGSWITCHCASE
*ngFor
Angular 227
TEXT
LOOP FOR
TEXT
*NGFOR
Diretivas:
o porquê de usar o *
e <template>
Angular 228
TEXT
NGIF
TEXT NGSWITCH E *NGSWITCHCASE
TEXT
NGFOR
ngClass
Angular 229
TEXT
NGCLASS
TEXT
NGCLASS
ngStyle
Angular 230
TEXT
NGSTYLE
TEXT
NGSTYLE
Operador elvis
Angular 231
TEXT
ELVIS OPERATOR ?
ng-content
Angular 232
https://github.com/loiane/curso-angular2
http://loiane.training
Material apoio + certificado do curso
Cadastro em:
Angular 2
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training

Mais conteúdo relacionado

Mais procurados

Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of AngularKnoldus Inc.
 
Django Introduction & Tutorial
Django Introduction & TutorialDjango Introduction & Tutorial
Django Introduction & Tutorial之宇 趙
 
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Knoldus Inc.
 
Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2 Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2 Loiane Groner
 
Angular components
Angular componentsAngular components
Angular componentsSultan Ahmed
 
Angular 8
Angular 8 Angular 8
Angular 8 Sunil OS
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 formsEyal Vardi
 
Entendendo Domain-Driven Design
Entendendo Domain-Driven DesignEntendendo Domain-Driven Design
Entendendo Domain-Driven DesignRafael Ponte
 
AngularJS - Services
AngularJS - ServicesAngularJS - Services
AngularJS - ServicesNir Kaufman
 
Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)André Justi
 
Django Tutorial | Django Web Development With Python | Django Training and Ce...
Django Tutorial | Django Web Development With Python | Django Training and Ce...Django Tutorial | Django Web Development With Python | Django Training and Ce...
Django Tutorial | Django Web Development With Python | Django Training and Ce...Edureka!
 

Mais procurados (20)

Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
 
Diagramas de componentes
Diagramas de componentesDiagramas de componentes
Diagramas de componentes
 
Angular routing
Angular routingAngular routing
Angular routing
 
Django Introduction & Tutorial
Django Introduction & TutorialDjango Introduction & Tutorial
Django Introduction & Tutorial
 
Angular
AngularAngular
Angular
 
Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2
 
Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2 Devfest Cerrado: Angular 2
Devfest Cerrado: Angular 2
 
Angular components
Angular componentsAngular components
Angular components
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Basic Python Django
Basic Python DjangoBasic Python Django
Basic Python Django
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 
Entendendo Domain-Driven Design
Entendendo Domain-Driven DesignEntendendo Domain-Driven Design
Entendendo Domain-Driven Design
 
Images, Deep Dive!
Images, Deep Dive!Images, Deep Dive!
Images, Deep Dive!
 
AngularJS - Services
AngularJS - ServicesAngularJS - Services
AngularJS - Services
 
Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
UML - Diagrama de Pacotes
UML - Diagrama de PacotesUML - Diagrama de Pacotes
UML - Diagrama de Pacotes
 
Django Tutorial | Django Web Development With Python | Django Training and Ce...
Django Tutorial | Django Web Development With Python | Django Training and Ce...Django Tutorial | Django Web Development With Python | Django Training and Ce...
Django Tutorial | Django Web Development With Python | Django Training and Ce...
 

Semelhante a Angular 2

Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e AlémAndre Baltieri
 
Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Loiane Groner
 
Workshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsWorkshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsFábio Elísio
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + FirebaseBruno Catão
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.jsDenis Velrino
 
Code splitting no react
Code splitting no reactCode splitting no react
Code splitting no reactGeorgiaAntunes
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLIVanessa Me Tonini
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETRenato Groff
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Frameworkelliando dias
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Loiane Groner
 
Criando APIs com Node e TypeScript
Criando APIs com Node e TypeScriptCriando APIs com Node e TypeScript
Criando APIs com Node e TypeScriptAndre Baltieri
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSMatheus Donizete
 

Semelhante a Angular 2 (20)

Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
 
Python 08
Python 08Python 08
Python 08
 
Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10
 
Workshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsWorkshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.js
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
 
Apache Wicket
Apache WicketApache Wicket
Apache Wicket
 
PHP no Google AppEngine
PHP no Google AppEnginePHP no Google AppEngine
PHP no Google AppEngine
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Code splitting no react
Code splitting no reactCode splitting no react
Code splitting no react
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLI
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
servlet-requisicoes
servlet-requisicoesservlet-requisicoes
servlet-requisicoes
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)
 
Criando APIs com Node e TypeScript
Criando APIs com Node e TypeScriptCriando APIs com Node e TypeScript
Criando APIs com Node e TypeScript
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Framework web 01 - Aula UTFPR 2018
Framework web 01 - Aula UTFPR 2018Framework web 01 - Aula UTFPR 2018
Framework web 01 - Aula UTFPR 2018
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
 

Angular 2

  • 2. • 10+ XP TI • Java, JavaScript, Sencha, Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
  • 6. ▸ Introdução ▸ Componentes e Templates AGENDA
  • 7. ▸ Introdução ▸ Componentes e Templates ▸ Data binding AGENDA
  • 8. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas AGENDA
  • 9. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços AGENDA
  • 10. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários AGENDA
  • 11. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento AGENDA
  • 12. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento ▸ Integração com servidor AGENDA
  • 13. ▸ Introdução ▸ Componentes e Templates ▸ Data binding ▸ Diretivas ▸ Serviços ▸ Formulários ▸ Roteamento ▸ Integração com servidor ▸ CRUD Mestre-Detalhe AGENDA
  • 14. ▸ HTML / CSS/ JavaScript REQUISITOS
  • 15. ▸ HTML / CSS/ JavaScript ▸ NÃO precisa saber AngularJS 1.x REQUISITOS
  • 17. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft
  • 18. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github)
  • 19. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate)
  • 20. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1
  • 21. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1 ▸ Foi reescrito
  • 22. ANGULAR 2 ▸ https://angular.io ▸ Parceria Google + Microsoft ▸ Open Source (código no Github) ▸ Atualmente na versão RC (Release Candidate) ▸ Não é continuação da versão 1 ▸ Foi reescrito ▸ Uso de padrões web e Web Components
  • 23. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  • 24. BLOCOS PRINCIPAIS {} Componente Encapsula: •Template •Metadata: processamento das classes •Dado a ser mostrado na tela (Data Binding) •Comportamento da VIEW
  • 26. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Posts
  • 27. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Post {} Post {} Post {} Post
  • 28. COMPONENTE {} Cabeçalho (Barra de navegação) {} Barra Lateral {} Post {} Post {} Post Star Widget
  • 32. SERVIÇO { } BACKEND Componente Node.JS Java .NET Ruby Python Serviço (Service) Backend Pode ser injetado em outras classes
  • 34. DIRETIVA D Diretiva Responsável por modificar elementos DOM e/ou seu comportamento
  • 37. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  • 39. BLOCOS PRINCIPAIS COMPONENTES DIRETIVAS ROTEAMENTO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA METADATA
  • 41. ▸ Node.JS O QUE PRECISAMOS INSTALAR
  • 42. ▸ Node.JS ▸ NPM O QUE PRECISAMOS INSTALAR
  • 43. ▸ Node.JS ▸ NPM ▸ TypeScript O QUE PRECISAMOS INSTALAR
  • 46. TYPESCRIPT $ npm install -g typescript
  • 47. TYPESCRIPT $ npm install -g typescript $ sudo npm install -g typescript SOMENTE MAC OU LINUX
  • 48. TYPESCRIPT TypeScript ECMAScript 6 ECMAScript 5 Junho 2015 Novembro 2009 meu-script.ts transpiler meu-script.js ES5
  • 51. ▸ TypeScript ▸ Dart ▸ ES 6 (ES 2015) LINGUAGEM
  • 52. ▸ TypeScript ▸ Dart ▸ ES 6 (ES 2015) ▸ ES 5 LINGUAGEM
  • 53. TYPINGS $ npm install typings --global https://github.com/typings/typings
  • 55. EDITOR DE TEXTO JÁ SUPORTA TS JÁ SUPORTA TS HTTPS://ATOM.IO/PACKAGES/ATOM-TYPESCRIPT HTTPS://GITHUB.COM/MICROSOFT/TYPESCRIPT-SUBLIME-PLUGIN
  • 57. ANGULAR CLI $ npm install -g angular-cli https://github.com/angular/angular-cli Requer node >= 4
  • 58. ANGULAR CLI ng new PROJECT_NAME cd PROJECT_NAME ng serve
  • 59. ANGULAR SEED - SITE ANGULAR.IO https://angular.io/docs/ts/latest/quickstart.html
  • 60. SEED QUE VAMOS USAR PARA OS EXEMPLOS $ git clone https://github.com/loiane/angular-2-boilerplate.git
  • 62. PARA EXECUTAR $ npm start $ npm install
  • 63. Entendendo o projeto Hello, World! Angular 204
  • 64. ESTRUTURA DO PROJETO - NOSSO EXEMPLO
  • 65. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado
  • 66. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto
  • 67. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  • 68. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  • 69. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  • 70. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Configurações TypeScript configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  • 71. ESTRUTURA DO PROJETO - NOSSO EXEMPLO Código fonte TS + javascript gerado Arquivos CSS e assets do projeto index.html Configurações TypeScript Configurações Typings configurações System.JS (módulos) Pacotes Node, instalados conforme package.json pacotes npm Angular 2 + dependências + extras
  • 72. INDEX.HTML <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <!-- CSS --> <link rel="stylesheet" href="assets/css/app.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>
  • 73. INDEX.HTML <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script>
  • 74. INDEX.HTML <!-- 3. Renderizando a aplicação --> <body> <my-app>Loading...</my-app> </body>
  • 75. INDEX.HTML <!-- 2. Renderizando a aplicação --> <body> <my-app>Loading...</my-app> </body> Usamos a tag no HTML para indicar qual componente será renderizado
  • 76. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
  • 77. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Classe TypeScript
  • 78. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Classe TypeScript exporta classe para que outras classes possam importá-la
  • 79. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Decorator que informa que essa classe é um Componente
  • 80. APP.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } E para usar esse decorator precisamos importar a classe Component do pacote do Angular
  • 81. APP.COMPONENT.TS import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Metadata: Nome da tag que será criada
  • 82. APP.COMPONENT.TS import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Metadata: Nome da tag (diretiva) que será criada Metadata: template HTML
  • 83. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent);
  • 84. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent
  • 85. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent Como exportamos a classe, podemos importar aqui
  • 86. MAIN.TS import {bootstrap} from '@angular/platform-browser-dynamic' import {AppComponent} from './app.component' bootstrap(AppComponent); inicializa a app instanciando o AppComponent Como exportamos a classe, podemos importar aqui não precisa do .ts
  • 87. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } };
  • 88. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } }; Os arquivos .js compilados do TypeScript que estão no diretório app que serão executados no browser
  • 89. DEPENDÊNCIAS - SYSTEMJS.CONFIG // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } }; Os arquivos .js compilados do TypeScript que estão no diretório app que serão executados no browser app/main.js é responsável por inicializar a app
  • 90. DEPENDÊNCIAS - SYSTEMJS.CONFIG var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package entries for angular packages in the form '@angular/common' ackageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages }; // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config);
  • 91. DEPENDÊNCIAS - SYSTEMJS.CONFIG var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ]; // add package entries for angular packages in the form '@angular/common' ackageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages }; // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config); Carrega os arquivos do Angular 2
  • 92. Ainda não existe um padrão, pode usar qualquer um: SISTEMA DE MÓDULOS
  • 93. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS SISTEMA DE MÓDULOS
  • 94. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack SISTEMA DE MÓDULOS
  • 95. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack ▸ Browserify SISTEMA DE MÓDULOS
  • 96. Ainda não existe um padrão, pode usar qualquer um: ▸ System.JS ▸ Webpack ▸ Browserify ▸ JSPM SISTEMA DE MÓDULOS
  • 98. PARA EXECUTAR $ npm start $ npm install
  • 100. MEU-PRIMEIRO.COMPONENT.TS Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 101. MEU-PRIMEIRO.COMPONENT.TS Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts meu-primeiro.component.ts Palavras separadas por “-“ Ponto “component" -> para indicar que é um componente Ponto ts -> extensão typescript
  • 102. MEU-PRIMEIRO.COMPONENT.TS export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 103. MEU-PRIMEIRO.COMPONENT.TS export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts meu-primeiro.component.ts
  • 104. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 105. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 106. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 107. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts nome da DIV a ser criada
  • 108. MEU-PRIMEIRO.COMPONENT.TS import {Component} from ‘@angular/core'; @Component({ selector: 'meu-primeiro-component', template: '<h2>Meu primeiro componente Angular 2!</h2>' }) export class MeuPrimeiroComponent {} Crie um arquivo dentro de app/hello chamado meu-primeiro.component.ts
  • 109. APP.COMPONENT.TS - USANDO O COMPONENTE import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular 2 Boilerplate</h1> <p>Hello World!</p> <meu-primeiro-component></meu-primeiro-component> ` }) export class AppComponent { }
  • 110. APP.COMPONENT.TS - USANDO O COMPONENTE
  • 111. APP.COMPONENT.TS - USANDO O COMPONENTE Cadê o componente????
  • 112. APP.COMPONENT.TS - USANDO O COMPONENTE import {Component} from ‘@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular 2 Boilerplate</h1> <p>Hello World!</p> <meu-primeiro-component></meu-primeiro-component> `, directives: [MeuPrimeiroComponent] }) export class AppComponent { }
  • 113. APP.COMPONENT.TS - USANDO O COMPONENTE
  • 114. TEXT AO CRIAR UM COMPONENTE NO ANGULAR - CIDAR DICA ▸ Class (Criar a classe) ▸ Import ▸ Decorate (Decorar a classe) ▸ Alterar ▸ Repetir
  • 116. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; }
  • 117. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; } Interpolation
  • 118. TEMPLATES - USANDO INTERPOLATION import {Component} from ‘@angular/core'; @Component({ selector: ‘cursos', template: ` <p>Olá, meu nome é {{ nome }}<p> ` }) export class CursosComponent { nome = 'Loiane'; } Interpolation
  • 119. TEMPLATES - USANDO INTERPOLATION
  • 120. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  • 121. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  • 122. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array
  • 123. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array Variável local curso criada
  • 124. TEMPLATES - DIRETIVAS import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Diretiva ngFor Itera uma coleção/array Variável local curso criada Interpolation da variável local curso
  • 126. TEMPLATES - DIRETIVAS @Component({ selector: 'cursos-list', /*template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `,*/ templateUrl: 'cursos.component.html', providers: [CursosService] }) export class CursosComponent { }
  • 127. TEMPLATES EM ARQUIVO SEPARADO Guia Angular 2 https://angular.io/styleguide
  • 128. Serviços (Services) e Injeção de dependência (DI) Angular 207
  • 129. SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; }
  • 130. SEPARANDO A LÓGICA DE NEGÓCIO DA VIEW import {Component} from '@angular/core'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos = ['Java', 'Angular 2', 'Estrutura de Dados']; } Suponha que vamos obter esses valores de um servidor. Melhor prática seria separar a lógica de negócio da VIEW
  • 132. CRIANDO UM SERVIÇO (SERVICE) import { Injectable } from '@angular/core'; @Injectable() export class CursosService { getCursos() : string[] { return ['Java', 'Angular 2', 'Estrutura de Dados']; } } Crie um arquivo dentro de app/cursos chamado cursos.service.ts Repare na convenção de nomes
  • 133. CRIANDO UM SERVIÇO (SERVICE) import { Injectable } from '@angular/core'; @Injectable() export class CursosService { getCursos() : string[] { return ['Java', 'Angular 2', 'Estrutura de Dados']; } } Crie um arquivo dentro de app/cursos chamado cursos.service.ts Repare na convenção de nomes
  • 134. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } }
  • 135. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço
  • 136. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado
  • 137. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado Injeção de Dependência
  • 138. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> ` }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } import do serviço atributo local a ser populado Injeção de Dependência Chamada do método do serviço
  • 141. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } }
  • 142. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } Precisamos informar ao Angular que queremos que injete a classe CursosService nesse componente
  • 143. USANDO INJEÇÃO DE DEPENDÊNCIA import {Component} from '@angular/core'; import {CursosService} from './cursos.service'; @Component({ selector: 'cursos', template: ` <h3>Cursos {{ tituloCursos }}</h3> <ul> <li *ngFor="let curso of cursos"> {{ curso }} </li> </ul> `, providers: [CursosService] }) export class CursosComponent { tituloCursos = 'loiane.training'; cursos; constructor(cursosService: CursosService){ this.cursos = cursosService.getCursos(); } } Precisamos informar ao Angular que queremos que injete a classe CursosService nesse componente O provider cria/provém (fornece) uma instância da classe
  • 146. TEXT SNIPPETS PARA CRIAÇÃO DO ESQUELETO DA CLASSE ANGULAR2 DICA ▸ VS Code: https://github.com/johnpapa/vscode-angular2- snippets ▸ Atom: https://atom.io/packages/angular-2-typeScript- snippets
  • 147. Property Binding (Binding de propriedades) + Interpolation Angular 209
  • 150. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor"
  • 151. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  • 152. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler" [(ngModel)]="propriedade"
  • 156. ▸ Valor do Component para o Template INTERPOLATION
  • 157. ▸ Valor do Component para o Template ▸ É uma forma de property binding INTERPOLATION
  • 158. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> INTERPOLATION
  • 159. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: INTERPOLATION
  • 160. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} INTERPOLATION
  • 161. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} ▸ {{ getValor() }} INTERPOLATION
  • 162. ▸ Valor do Component para o Template ▸ É uma forma de property binding ▸ <h3>{{ url }}</h3> ▸ Permite uso de algumas expressões, como: ▸ {{ 1 + 1}} ▸ {{ getValor() }} ▸ {{ minhaVar && minhaVar2 }} INTERPOLATION
  • 164. ▸ Valor do Component para o Template PROPERTY BINDING
  • 165. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> PROPERTY BINDING
  • 166. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> ▸ Formato padrão é através de bind- nomePropriedade <img bind-src="urlImg"/> PROPERTY BINDING
  • 167. ▸ Valor do Component para o Template ▸ Usa-se colchetes <img [src]="urlImg"/> ▸ Formato padrão é através de bind- nomePropriedade <img bind-src="urlImg"/> ▸ Quando não existe uma propriedade no elemento, usa-se [attr.colspan] PROPERTY BINDING
  • 169. PROPERTY BINDING Todas as imagens tem o mesmo resultado
  • 170. Class e Style Binding (Binding de classes e estilos) Angular 210
  • 171. CLASS E STYLE BINDING - EXEMPLO 01
  • 172. CLASS E STYLE BINDING - EXEMPLO 01 Variável local chamada class
  • 173. CLASS E STYLE BINDING - EXEMPLO 01 Variável local chamada class Property binding
  • 174. CLASS E STYLE BINDING - EXEMPLO 02
  • 175. CLASS E STYLE BINDING - EXEMPLO 02
  • 176. CLASS E STYLE BINDING - EXEMPLO 02 Só recebe a class caso a expressão seja verdadeira
  • 177. CLASS E STYLE BINDING - EXEMPLO 03
  • 178. CLASS E STYLE BINDING - EXEMPLO 03 Mostra o estilo ou não?
  • 179. CLASS E STYLE BINDING - EXEMPLO 03 Mostra o estilo ou não? Expressão com o valor da variável
  • 180. Event Binding (Binding de eventos) Angular 211
  • 181. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  • 182. ▸ Valor do Template para o Componente EVENT BINDING
  • 183. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> EVENT BINDING
  • 184. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> ▸ Método “handler" declarado no Componente EVENT BINDING
  • 185. ▸ Valor do Template para o Componente ▸ Usa-se parênteses <button (click)=“onClick()”/> ▸ Método “handler" declarado no Componente ▸ Forma canônica <button on-click=“onClick()”/> EVENT BINDING
  • 186. EVENT BINDING - EXEMPLO 01
  • 187. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado"
  • 188. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  • 189. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  • 190. EVENT BINDING - EXEMPLO 01 Evento a ser "escutado" Método/Função a ser executada
  • 191. EVENT BINDING - EXEMPLO 02
  • 192. EVENT BINDING - EXEMPLO 02 $event é do tipo evento DOM
  • 193. EVENT BINDING - EXEMPLO 02 $event é do tipo evento DOM acesso a variável local declarada acesso a variável local declarada
  • 194. EVENT BINDING - EXEMPLO 02
  • 195. EVENT BINDING - EXEMPLO 02 $event tem propriedades como event.target e event.target.value
  • 196. EVENT BINDING - EXEMPLO 03
  • 197. EVENT BINDING - EXEMPLO 03
  • 198. EVENT BINDING - EXEMPLO 03 Plugin ATOM para mostrar cor: https://atom.io/packages/pigments
  • 199. DICA: USANDO CSS NO COMPONENTE
  • 200. DICA: USANDO CSS NO COMPONENTE Note a convenção de nomenclatura
  • 201. TEXT QUAIS EVENTOS POSSO USAR? DICA ▸ Lista com todos os eventos ▸ https://developer.mozilla.org/en-US/docs/Web/Events
  • 203. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler"
  • 204. DATA BINDING <TEMPLATE> {COMPONENT} {{ valor }} [propriedade]="valor" (evento)="handler" [(ngModel)]="propriedade"
  • 205. ▸ Valor do Template para o Componente e vice-versa TWO-WAY DATA BINDING
  • 206. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades TWO-WAY DATA BINDING
  • 207. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  • 208. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  • 209. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  • 210. TWO-WAY DATA BINDING Como manter o template e o componente atualizados?
  • 211. TWO-WAY DATA BINDING Property binding + event binding Como manter o template e o componente atualizados?
  • 212. TWO-WAY DATA BINDING COM NGMODEL Aplicando o ngModel
  • 213. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel TWO-WAY DATA BINDING
  • 214. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: TWO-WAY DATA BINDING
  • 215. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> TWO-WAY DATA BINDING
  • 216. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> ▸ Forma canônica é TWO-WAY DATA BINDING
  • 217. ▸ Valor do Template para o Componente e vice-versa ▸ Usa-se binding de eventos + propriedades ▸ Forma mais simples é fazer o binding no ngModel ▸ Usa-se sintaxe de binding de eventos + propriedade: ▸ <input type="text" [(ngModel)]="nome" /> ▸ Forma canônica é ▸ <input type="text" bindon-ngModel="nome" /> TWO-WAY DATA BINDING
  • 220. TWO-WAY DATA BINDING Two-way data binding com NgModel
  • 221. TWO-WAY DATA BINDING Two-way data binding com NgModel Forma canônica
  • 222. SINTAXE BANANA IN A BOX SINTAXE “BANANA NA CAIXA" [()]
  • 224. TWO-WAY DATA BINDING Two-way data binding com objetos
  • 227. CRIANDO COMPONENTES REUTILIZÁVEIS Objetivo: criar um componente onde podemos criar propriedades customizadas para que outros componentes possam usar o mesmo
  • 228. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  • 230. INPUT PROPERTIES 2 - Usamos a anotação @Input nos atributos que queremos expor
  • 232. INPUT PROPERTIES 3 - Caso queira expor o atributo/propriedade com nome diferente, podemos passar como parâmetro para o @input
  • 233. INPUT PROPERTIES 4 - Caso não queria usar o @Input(), pode declarar como meta-dado no @Component também
  • 234. QUAL USAR? METADADO OU ANOTAÇÃO? Gosto pessoal. Porém, o @Input é mais notável Gosto pessoal. Porém, o @Input é mais notável visualmente!
  • 237. CRIANDO COMPONENTES REUTILIZÁVEIS Componente customizado. Objetivo: disparar um evento “mudou” toda vez que o usuário clicar nos botões de + ou -. Evento recebe novo valor do input.
  • 239. CRIANDO COMPONENTES REUTILIZÁVEIS Objetivo: poder escutar eventos customizados, ou seja, criados por nós
  • 240. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  • 241. CRIANDO COMPONENTES REUTILIZÁVEIS 1 - Criamos o componente normalmente
  • 242. CRIANDO COMPONENTES REUTILIZÁVEIS 2 - Criamos um atributo do tipo EventEmitter (que irá emitir o evento “mudou”. Anotamos com o @Output para mostrar que o atributo será exposto como valor de saída do Component
  • 243. CRIANDO COMPONENTES REUTILIZÁVEIS 3 - Emitimos o evento com o valor que desejamos expor
  • 244. CRIANDO COMPONENTES REUTILIZÁVEIS 4 - Também podemos expor o evento com um nome diferente do que utilizado internamente.
  • 245. CRIANDO COMPONENTES REUTILIZÁVEIS 5 - O Output também pode ser usado em forma de metadado
  • 246. Ciclo de vida do Componente Angular 215
  • 247. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado
  • 248. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado
  • 249. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças
  • 250. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view
  • 251. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido
  • 252. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho
  • 253. LIFE CYCLE HOOKS # EVENTO (HOOKS) QUANDO? ngOnChanges1 antes #2 e quando valor property-binding é atualizado ngOnInit2 quando Component é inicializado ngDoCheck3 a cada ciclo de verificação de mudanças ngAfterContentInit4 depois de inserir conteúdo externo na view ngAfterContentChecked5 a cada verificação de conteúdo inserido ngAfterViewChecked6 a cada verificação de conteúdo / conteúdo filho ngOnDestroy7 antes da diretiva/component ser destruído
  • 255. LIFE CYCLE HOOKS Note o nome da interface e o nome do método a ser implementado: ng + NomeInterface
  • 256. Acesso de variáveis locais do Template com ViewChild Angular 216
  • 258. Mudanças Angular RC 5 ngModule Angular 2xx
  • 259. TEXT O QUE MUDOU NO RC5? ▸ Introdução do conceito de ngModule ▸ Breaking change a partir do RC 6 / Release ▸ Forma de organizar a aplicação em módulos ▸ Toda a app precisa de um módulo raiz (root) ▸ É possível também criar módulos de features
  • 260. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? ▸ 1 - Atualizar a dependencies conforme https://github.com/ angular/quickstart/blob/master/package.json ▸ 2 - Substituir o app.component.spec.ts (https:// github.com/angular/quickstart/blob/master/app/ app.component.spec.ts) ▸ 3 - Substituir o main.ts (https://github.com/angular/ quickstart/blob/master/app/main.ts) ▸ 4 - Criar arquivo app.module.ts (https://github.com/ angular/quickstart/blob/master/app/app.module.ts) ▸ 5 - Refatorar!
  • 261. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm outdated > npm update
  • 262. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm install -g npm-check-updates > npm-check-updates -u > npm update
  • 263. TEXT COMO ATUALIZAR O PROJETO PARA O RC 5? > npm install -g npm-check-updates > npm-check-updates -u > npm update atualiza o package.json também
  • 265. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app
  • 266. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app Import do componente principal
  • 267. APP.MODULE.TS (NOVO ARQUIV0) Import do decorator e módulo obrigatório para a app Import do componente principal Import das classes
  • 269. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados
  • 270. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives
  • 271. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives providers (serviços)
  • 272. APP.MODULE.TS (NOVO ARQUIV0) imports: módulos a serem importados declarations: directives providers (serviços) Componente principal da app
  • 273. MUDOU O CONTEÚDO DO MAIN.TS
  • 274. MUDOU O CONTEÚDO DO MAIN.TS não faz mais boot pela classe, e sim módulo principal
  • 276. NOS COMPONENTES não precisa mais do import e nem do meta-dado directives pra usar a tag cursos não precisa mais do import e nem do meta-dado directives pra usar a tag cursos
  • 277. É POSSÍVEL CRIAR MÓDULO DE FEATURE
  • 278. É POSSÍVEL CRIAR MÓDULO DE FEATURE usa-se o CommonModule e não BrowserModule
  • 279. É POSSÍVEL CRIAR MÓDULO DE FEATURE usa-se o CommonModule e não BrowserModule classes a serem expostas em outros módulos
  • 280. É POSSÍVEL CRIAR MÓDULO DE FEATURE
  • 281. É POSSÍVEL CRIAR MÓDULO DE FEATURE precisa importar pois está sendo usada/declarada no construtor precisa importar pois está sendo usada/declarada no construtor
  • 282. É POSSÍVEL CRIAR MÓDULO DE FEATURE precisa importar pois está sendo usada/declarada no construtor precisa importar pois está sendo usada/declarada no construtor não precisa mais do meta- dado provider
  • 286. PROJETO DATA-BINDING two-way data-binding ([ngModel]) precisa do import
  • 287. Angular CLI: Instalação e criação de projetos: ng new, ng init e ng serve Angular 217
  • 288. ANGULAR CLI $ npm install -g angular-cli https://github.com/angular/angular-cli Requer node >= 4
  • 289. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve
  • 290. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve Cria um projeto angular 2 e executa npm install
  • 291. ANGULAR CLI: CRIANDO PROJETO > ng new NomeProjeto > cd NomeProjeto > ng serve Cria um projeto angular 2 e executa npm install “serve" o projeto ao browser. Similar ao npm start que estávamos executando
  • 292. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve
  • 293. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve Cria um diretório
  • 294. ANGULAR CLI: CRIANDO PROJETO EM DIRETORIO EXISTENTE > mkdir NomeProjeto > cd NomeProjeto > ng init > ng serve Cria um diretório Cria um projeto angular 2 no diretório existente
  • 295. Angular CLI: Criando components, services: ng generate Angular 218
  • 296. ANGULAR CLI: CRIANDO COMPONENTS > cd NomeProjeto > ng generate component meu-primeiro > ng g component meu-primeiro
  • 297. ANGULAR CLI: CRIANDO COMPONENTS > cd NomeProjeto > ng generate component meu-primeiro > ng g component meu-primeiro
  • 298. ANGULAR CLI: CRIANDO COMPONENTS
  • 299. ANGULAR CLI: CRIANDO SERVIÇOS > cd NomeProjeto > ng generate service meu-primeiro/ meu-primeiro
  • 300. ANGULAR CLI: CRIANDO SERVIÇOS > cd NomeProjeto > ng generate service meu-primeiro/ meu-primeiro Cria um serviço no módulo meu-primeiro
  • 301. ANGULAR CLI: CRIANDO SERVIÇOS
  • 302. ANGULAR CLI: CRIANDO SERVIÇOS Cria um serviço no módulo meu-primeiro Arquivo spec.ts é para testes unitários
  • 303. TEXT ANGULAR 2 STYLE GUIDE
  • 304. TEXT ANGULAR 2 STYLE GUIDE
  • 305. TEXT ANGULAR 2 STYLE GUIDE
  • 306. TEXT ANGULAR 2 STYLE GUIDE Arquivos são gerados usando o padrão de nomenclatura e boas práticas segundo o style guide
  • 307. ANGULAR CLI: CRIANDO ARQUIVOS Tipo Arquivo Comando Component ng g component meu-component Service ng g service meu-servico Directive ng g directive minha-diretiva Pipe ng g pipe meu-pipe Class ng g class minha-classe Interface ng g interface minha-interface Enum ng g enum meu-enum
  • 308. Atualizando o angular-cli para RC5 e webpack Angular 2xx
  • 309. ANGULAR CLI: UPDATE RC5 ▸ Situação atual (agosto/2016): ▸ upgrade do build para o webpack (estava usando o broccoli) ▸ Versão ainda em beta (1.0.0-beta.11-webpack.2) ▸ é a versão que usa RC5 ▸ Atualize o Node e o NPM ▸ Node 6 ▸ NPM 3
  • 310. ANGULAR CLI: UPDATE RC5 > npm uninstall -g angular-cli > npm cache clean > npm install -g angular-cli@webpack
  • 311. ANGULAR CLI: UPDATE RC5 > ng new meu-projeto > cd meu-projeto > rm -rf node_modules dist tmp typings > npm install --save-dev angular-cli@webpack > ng init
  • 312. ANGULAR CLI: UPDATE RC5 ▸ Depois da atualização, os seguintes arquivos podem ser removidos: ▸ ./config/karma-test-shim.js ▸ ./config/environment.js ▸ ./src/system-config.ts ▸ ./angular-cli-build.js ▸ ./typings.json ▸ ./.clang-format (se existir)
  • 313. Angular CLI: Usando Sass, Less ou Stylus Angular 219
  • 314. ESCOLHENDO O PRÉ-PROCESSADOR > ng new meu-projeto --style=sass > ng new meu-projeto --style=less > ng new meu-projeto --style=stylus AO GERAR UM NOVO PROJETO
  • 315. ESCOLHENDO O PRÉ-PROCESSADOR > ng set defaults.styleExt scss > ng set defaults.styleExt less > ng set defaults.styleExt styl EM UM PROJETO EXISTENTE
  • 316. AO CRIAR UM NOVO COMPONENTE
  • 317. Angular CLI: ng lint, ng test, ng e2e Angular 220
  • 321. Angular CLI: Estrutura do projeto Angular 221
  • 322. TEXT PRA QUE SERVE O ANGULAR CLI? ▸ Cria toda a estrutura do projeto ▸ Gera página HTML inicial, arquivos Typescript iniciais, arquivos CSS e arquivos de testes unitários ▸ Cria arquivo package.json com todas as dependências do Angular 2 ▸ Instala todas as dependências do node (npm install) ▸ Configura o Karma para executar os testes unitários com Jasmine ▸ Configura Protractor para executar os testes end-to-end (E2E) ▸ Inicializa um repositório git no projeto e faz o commit inicial ▸ Cria todos os arquivos necessários para fazer o build da aplicação para produção
  • 323. TEXT ESTRUTURA DIRETÓRIOS DO PROJETO ▸ config – diretório que contém configuração para deploy/build e teste. ▸ dist – diretório onde é gerado o build da aplicação. Ignorado pelo git ▸ e2e – diretório que contém os scripts para testes end- to-end ▸ node_modules – diretório que contém os pacotes npm da app (package.json). Também ignorado pelo git ▸ public – diretório genérico que contém um arquivo .npmignore ▸ src – diretório do código fonte da aplicação. Contém código typescript/javascript, CSS, imagens e templates HTML.
  • 324. TEXT ESTRUTURA CÓDIGO FONTE (SCR) ▸ index.html - página HTML principal da aplicação, que faz o startup. ▸ main.ts é o código que carrega a aplicação. Somente deve ser editado caso seja necessário adicionar mais módulos na app. ▸ system-config.ts configura as dependências da app. Bibliotecas e extensões angular 2 devem ser adicionadas aqui para que sejam carregadas na app. ▸ tsconfig.json contém as configurações do compilador do typescript ▸ typings.d.ts é usado para declarações de tipos que a app usa ▸ index.ts contém o export de todos os arquivos do módulo
  • 325. TEXT A DOCUMENTAÇÃO É A SUA MELHOR AMIGA! DESENVOLVA O HÁBITO DE LER OS DOCS! LEMBRE-SE SEMPRE DE CONSULTAR A DOCUMENTAÇÃO! ▸ https://angular.io/docs
  • 326. TEXT DEPENDENCIES X DEVDEPENDENCIES ESTRUTURA PACKAGE.JSON ▸ dependencies: dependências necessárias para executar a aplicação. ▸ devDependencies: dependências necessárias para desenvolver a aplicação (não necessárias após o build de produção).
  • 328. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES ▸ @angular/core - pacote principal do framework Angular 2. Contém decorators e metadados, Component, Directive, injeção de dependência e os hooks de ciclo de vida do Component. ▸ @angular/common - Serviços, pipes e diretivas comuns fornecidas pelo time de dev do Angular. ▸ @angular/compiler - Template de compilação do angular. Entende o código dos templates e converte em código que faz a app ser executada e renderizada. Desenvolvedores não interagem com esse pacote diretamente (apenas usamos seu código). ▸ @angular/forms - contém todo o código para construção de formulários no angular 2. ▸ @angular/platform-browser - contém todo o código relacionado ao DOM e ao browser, especialmente as parte que ajudam a renderizar o DOM. Esse pacote também contém o método para fazer o bootstrap da aplicação para builds de produção que pré-compila os templates. ▸ @angular/platform-browser-dynamic - Contém os Providers e o método para iniciar as aplicações que compilam templates no lado cliente. Não usa compilação offline. Usada para fazer bootstrap durante desenvolvimento e exemplos plunker. ▸ @angular/http - fornece o cliente HTTP. ▸ @angular/router - classes de roteamento.
  • 329. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS ▸ es6-shim - biblioteca que permite compatibilidade de engines JS antigas com a especificação do ES 2015, ou seja, emula as funcionalidades do ES 2015 em browsers que suportam somente ES5. ▸ reflect-metadata - dependência compartilhada entre o Angular e o compilador TypeScript. Permite o uso de decorators no código (annotations). Isso permite ao desenvolvedores fazer upgrade no TypeScript sem precisar de fazer upgrade no Angular. Esse é o motivo desta ser uma dependência da aplicação e não do angular. ▸ rxjs - extensão para a especificação dos Observables (programação assíncrona). Reactive extensions for JavaScript. ▸ system.js - módulo para carregamento dinâmico compatível com a especificação de módulos do ES 2015. Como alternativa também podemos usar o Webpack. O SystemJS é o módulo utilizando oficialmente na documentação do Angular 2. ▸ zone.js - extensão (plugins) útil para tarefas assíncronas (chamadas de Zones).
  • 330. TEXT ESTRUTURA PACKAGE.JSON: DEVDEPENDENCIES
  • 331. TEXT ESTRUTURA PACKAGE.JSON: DEPENDENCIES: POLYFILLS ▸ angular-cli: ferramenta de linha de comando para gerenciar projetos angular 2. ▸ codelyzer: lint (análise de código) para angular 2 ▸ ember-cli-inject-live-reload: ferramenta de live reload ▸ jasmine-core: arquivos principais jasmine para node.js ▸ jasmine-spec-reporter: relatório em tempo real para BDD com Jasmine ▸ karma: ferramenta de testes que cria um web server e executa código de teste em cada um dos browsers conectados ▸ karma-chrome-launcher: launcher do karma para o chrome ▸ karma-jasmine: adaptador para o jasmine ▸ protractor: framework de teste end to end (integração) para angular ▸ ts-node: módulo typescript para node.js ▸ tslint: lint (análise de código) para typescript ▸ typescript: compilador typescript ▸ typings: gerenciador de arquivos de definição para typescript
  • 332. Angular CLI: Gerando o build de produção Angular 222
  • 333. GERANDO O BUILD DE DESENVOLVIMENTO > cd NomeProjeto > ng build --target=development --environment=dev > ng build --dev --e=dev > ng build --dev > ng build
  • 334. TEXT BUILD DE DEV ▸ Útil para integrar o código do Angular 2 com o projeto de backend (PHP, Java, .NET, Python, Ruby etc) ▸ Código que dá pra debugar ▸ Apenas copia o código de desenvolvimento para o diretório dist (apenas código .js)
  • 335. GERANDO O BUILD DE PRODUÇÃO > cd NomeProjeto > ng build --target=production --environment=prod > ng build --prod --env=prod > ng build --prod
  • 336. TEXT BUILD DE PROD ▸ Obfusca e minifica o código JS da aplicação ▸ Arquivos CSS e templates HTML não são minificados ▸ diretório vendor contém todo o código Angular 2 + dependências
  • 337. TEXT CRIAR ARQUIVO .EMBER-CLI NO PROJETO MUDAR O DIRETÓRIO DE OUTPUT
  • 338. TEXT CRIAR ARQUIVO .EMBER-CLI NO PROJETO MUDAR O DIRETÓRIO DE OUTPUT TOMAR CUIDADO POIS SE O DIRETÓRIO JÁ EXISTIR, O MESMO SERÁ DELETADO E RECRIADO
  • 340. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA
  • 341. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA OUTPUT BUILD PROJETO ANGULAR 2
  • 342. TEXT EXEMPLO DE ARQUITETURA DOS PROJETOS WORKSPACE DO PROJETO ANGULAR2 + JAVA OUTPUT BUILD PROJETO ANGULAR 2 PROJETO ANGULAR 2
  • 343. Angular CLI: instalando bibliotecas (bootstrap, jquery, semantic ui, etc) Angular 223
  • 344. INSTALANDO A DEPENDÊNCIA > cd NomeProjeto > npm install ng2-bootstrap --save > npm install moment --save https://github.com/valor-software/ng2-bootstrap
  • 348. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS?
  • 349. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS? "Itere todos os cursos, e a cada iteração, atribua o valor do elemento atual à uma variável curso. Replique também o elemento <li> com valor da variável curso a cada iteração."
  • 350. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS?
  • 351. TEXT DIRETIVAS SÃO INSTRUÇÕES O QUE SÃO DIRETIVAS? “Crie um componente do Tipo (classe) especificado e renderize a view (template) desse componente nesse lugar“.
  • 352. TEXT TIPOS DE DIRETIVAS DIRETIVAS ESTRUTURAIS Interagem com a view e modificam a estrutura do DOM e/ou código HTML *ngFor *ngIf
  • 353. TEXT TIPOS DE DIRETIVAS DIRETIVAS ESTRUTURAIS Interagem com a view e modificam a estrutura do DOM e/ou código HTML *ngFor *ngIf DIRETIVAS DE ATRIBUTOS Interagem com o elemento em que foram aplicadas ng-class ng-style
  • 358. TEXT *NGIF X HIDDEN [hidden] *ngIf recomendado para árvore de elementos pequenas recomendado para árvore de elementos grandes
  • 359. TEXT *NGIF X HIDDEN - EXCEÇÃO [hidden] é menos custoso usar [hidden] caso o custo de criar a árvore de elementos seja grande
  • 366. Diretivas: o porquê de usar o * e <template> Angular 228
  • 368. TEXT NGSWITCH E *NGSWITCHCASE
  • 380. http://loiane.training Material apoio + certificado do curso Cadastro em: