Académique Documents
Professionnel Documents
Culture Documents
of Contents
Introduction 1.1
QuickStart 1.2
2
Introduction
Contribuies
Contribuies so bem vindas. Para contribuir basta forkar o projeto e enviar os PRs.
Status
No momento apenas o quickstart est traduzido. Estamos aguardando o lanamento oficial
do angular 2 para traduzir toda a documentao.
3
QuickStart
QuickStart
Nota do tradutor: A documentao foi traduzida utilizando "Angular 2 for Typescript".
No site oficial pode-se trocar por "Angular 2 for javascript" ou "Angular 2 for Dart".
No precisa de Typescript?
Testando a aplicao
Teste o exemplo no qual carrega a aplicao no plunker e exibe a seguinte mensagem:
Construa a aplicao!
Pr-requisitos: Instalar Node
Passo 1: Crie o diretrio da aplicao e defina a dependncia de pacotes e a
configurao de projeto.
Passo 2: Crie o componente raiz da aplicao Angular.
Passo 3: Adicione main.ts , identificando o componente raiz para o Angular.
Passo 4: Adicione index.html , a pgina web que contm a aplicao.
Passo 5: Construa e execute a aplicao.
Faa algumas mudanas na aplicao
Concluso
4
QuickStart
Verifique se voc est executando pelo menos a ltima verso do node v5.x.x e
npm v.3.x.x executando o comando node -v e npm -v em um terminal/console.
Verses antigas podem gerar erros.
mkdir angular2-quickstart
cd angular2-quickstart
5
QuickStart
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
6
QuickStart
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
7
QuickStart
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// 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': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js'
};
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
8
QuickStart
npm install
Tudo estar bem se no console no aparecer mensagens que comearem com npm
ERR! at o fim do npm install . Pode haver algumas mensagens npm WARN - e isso
Muitas vezes mensagens npm WARN aparecem depois de erros gyp ERR! . Ignore-os.
Um pacote deve tentar se recompilar usando node-gyp . Se a recompilao falha, o
pacote se recupera (tipicamente com uma verso anterior) e tudo funciona bem.
Apenas tenha certeza que erros com mensagens npm ERR! no aparecem at o fim do
npm install .
Scripts teis
Inclumos um certo nmero de scripts npm no arquivo package.json sugerido, para lidar
com as tarefas mais comuns no desenvolvimento:
9
QuickStart
{
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
}
}
Executa-se a maioria dos scritps da seguinte maneira: npm run seguido do script-name.
Alguns comandos (como o start ) no necessitam da palavra run .
npm run tsc:w executa o compilador Typescript no modo watch; o processo continua
npm run postinstall chamado pelo npm automaticamente aps completar com
mkdir app
Crie o componente app/app.component.ts (no novo diretrio criado) com o seguinte cdigo:
app/app.component.ts
10
QuickStart
Toda aplicao Angular deve conter pelo menos um componente principal, por conveno
chamamos de AppComponent . Componentes so como blocos de uma aplicao Angular.
Um componente tem controle sobre uma parte da tela - a view - associada atravs de um
template.
Import
Aplicaes Angular so modulares. Elas consistem de muitos arquivos, cada um dedicados
para uma proposta. O prprio Angular modular. Ele uma coleo de bibliotecas
modulares, cada uma delas com um propsito, com funcionalidades relacionados que so
usadas para construir a aplicao.
app/app.component.ts (import)
@Component
O decorator Component uma funo que reune metadados do objeto como argumento.
Aplicamos esta funo para para o classe do componente prefixiando a funo com o
smbolo @ e invocando os metadados do objeto, logo antes da classe.
11
QuickStart
app/app.component.ts (metadata)
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
O selector especifica um simples CSS seletor para um elemento HTML que representa o
componente.
O elemento para este componente nomeado my-app . Angular cria e exibe uma
instncia do nosso AppComponent onde quer que encontre o elemento my-app no
arquivo html.
O template especifica o template que acompanha o componente, escrito como uma forma
de html melhorada que dia ao Angular como ele ser renderizado.
Este template uma simples linha de cdigo HTML, anunciando "My First Angular 2
App" Um template mais avanado pode conter data bindings para propriedades do
componente e pode identificar outros componentes da aplicao no qual possui os
seus prprios templates. Estes templates podem identificar ainda com outros
componentes. nesta forma uma que uma aplicao Angular se relaciona com a sua
rvore de componentes
Componente class
No fim do arquivo tem-se uma classe vazia, chamada AppComponent .
app/app.component.ts (class)
Quando estivermos prontos para construir uma aplicao mais complexa, podemos
expandir esta classe com propriedades e lgica. Nossa classe AppComponent est vazia
porque no h a necessidade de se fazer nada neste Quickstart.
Exportamos a classe AppComponent (export) ento esta pode ser importada (import) em
qualquer lugar de aplicao, como veremos ao criar o main.ts .
12
QuickStart
Adicionar main.ts
Agora precisamos adicionar algo para dizer ao Angular para carregar o componente raiz.
Crie o arquivo app/main.ts com o seguinte contedo:
app/main.ts
bootstrap(AppComponent);
Bootstrap platform-specific
13
QuickStart
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
1 As bibliotecas Javascript
2 Arquivo de configurao do systemJS , e o script que importa e executa a aplicao
referente ao arquivo main que foi escrito.
3 A tage <my-app> no <body> no qual a aplicao reside
Bibliotecas
As seguinte so carregadas
<script src="node_modules/core-js/client/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>
14
QuickStart
Comeamos com core-js shim no qual cria-se patches para o contexto global (window)
com funcionalidades essenciais para o ES6. As prximas bibliotecas so zone.js e
reflect-metadata . Ento a biblioteca SystemJS adicionada para carregar os mdulos
extras.
SystemJS
Quickstart usa o SystemJS para carregar a aplicao e seus mdulos. Adicionamos
recentemente o arquivo systemjs.config.js na raiz do projeto. Existem outras alternativas
que funcionam bem, como por exemplo o webpack . SystemJS pode se tornar uma boa
escolha, mas apenas uma escolha e no uma precisa ser mandatria.
quando ele for importar algum mdulo. Ento, registramos todos os pacotes para o
SystemJS : todas as dependncias de projeto e a aplicao app .
O pacote app diz ao SystemJS o que deve ser carregado quando uma requisio ao
mdulo app for feita, no diretrio app .
app/main.ts
15
QuickStart
Repare que o nome do mdulo (depois do form) no faz meno a extenso do arquivo. na
configurao do SystemJS j configuramos que a extenso .js , ou seja um arquivo
JavaScript. Isso faz sentido porque compilamos a aplicao do TypeScript para o Javascript
antes da execuo da aplicao.
A chamada System.import diz ao SystemJS para importar o arquivo main ( main.js antes
de compilar era main.ts , lembra?); main existe para dizer ao Angular para executar a
aplicao. Aproveitamos tambm para capturar e exibir erros no console do navegador.
Crie o arquivo style.css na raiz do projeto e adicione alguns estilos. O arquivo completo
style.css pode ser encontrado aqui.
16
QuickStart
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
/*
* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles
.css
* for the full set of master styles used by the documentation samples
*/
npm start
Bom trabalho!
17
QuickStart
Resumindo
O projeto final fica com a seguinte estrutura:
app/app.component.ts
app/main.ts
18
QuickStart
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
19
QuickStart
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
tsconfig.json
20
QuickStart
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
style.css
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
/*
* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles
.css
* for the full set of master styles used by the documentation samples
*/
systemjs.config.js
21
QuickStart
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// 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': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js'
};
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
22
QuickStart
23