Table

of Contents
Introduction 1.1
QuickStart 1.2

2
Introduction

Traduo da documentao oficial do

angular.io
Este livro uma traduo livre para o portugus da documentao oficial do site
angular2.io.

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".

O objetivo do QuickStart criar e executar uma simples aplicao em Angular 2 com

Typescript, e estabelecer um ambiente de desenvolvimento para o restante dos exemplos
da documentao que so a base para aplicaes reais.

No precisa de Typescript?

Embora estamos comeando em Typescript, voc pode escrever aplicaes em

Angular 2 com Dart ou Javascript. Basta selecionar a linguagem no combobox no topo
do site.

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

Pr-requisitos: Instalar Node

Instale Node.js e npm se voc ainda no o possui em seu computador.

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.

Download do cdigo fonte

Ao invs de seguir cada passo destas instrues, pode-se realizar o download do

cdigo fonte pelo github e seguir as instrues resumidas do projeto.

Passo 1: Criar e configurar o projeto

Neste passo vamos:

(a) Criar o diretrio do projeto

(b) Definir os pacotes e os arquivos de configurao
(c) Instalar os pacotes

(a) Criar o diretrio do projeto

mkdir angular2-quickstart
cd angular2-quickstart

(b) Definir os pacotes e os arquivos de configurao

Adicione ao diretrio do projeto os seguintes arquivos que contm informaes sobre os
pacotes e arquivos de configurao:

package.json Lista os pacotes que a aplicao QuickStart depende e define alguns

scripts teis. Veja Npm Package Configuration para maiores detalhes.

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

tsconfig.json a configurao do compilador do Typescript. Veja Typescript

Configuration para maiores detalhes

6
QuickStart

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

typings.json identifica os arquivos de definio do TypeScript. Veja Typescript

Configuration para maiores detalhes

{
"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"
}
}

system.config.js O arquivo de configurao do SystemJS. Veja o porqu neste link.

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

(c) Instalar pacotes

8
QuickStart

Instalamos os pacotes listados no package.json usando npm . Entre com o seguinte

comando um uma janela de terminal (janela de comando no Windows).

npm install

Mensagens de erro em vermelho podem aparecer durante a instalao. Geralmente, a

instalao resolve estes erros e finaliza com sucesso.

erros e avisos do npm

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

est perfeitamente bem.

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 .

Adicionar as bibliotecas e pacotes que necessitam do npm

Os desenvolvedores de aplicaes Angular dependem do gerenciador de pacotes npm

par ainstalar as bibliotecas que as aplicaes necessitam. Os desenvolvedores
Angular recomendam alguns pacotes especificados nas sees dependencies e
devDependencies . Veja o item sobre os pacotes npm para mais detalhes.

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 .

O que estes scripts fazem?

npm start executa o compilador e o servidor ao mesmo tempo, ambos no modo

watch (aguarda alteraes no cdigo e recompila)

npm run tsc executa o compilador Typesscript uma vez

npm run tsc:w executa o compilador Typescript no modo watch; o processo continua

executando, aguardando alteraes nos arquivos Typescript, e recompilando quando

uma alterao acontece.
npm run lite executa o lite-server, um leve servidor de arquivos que d um excelente

suporte as aplicaes Angular que usam routing.

npm run typings executa a ferramenta typings separadamente

npm run postinstall chamado pelo npm automaticamente aps completar com

sucesso a instalao dos pacotes. Este script instala os arquivos de [definio do

Typescript] definidos no typings.json .

Estamos com tudo pronto. Vamos escrever um pouco de cdigo.

Passo 2: Nosso primeiro componente Angular

Vamos criar um diretrio que conter nossa aplicao e adiciona um super-simples
componente Angular.

Crie o sub diretrio app na raiz do projeto:

mkdir app

Crie o componente app/app.component.ts (no novo diretrio criado) com o seguinte cdigo:

app/app.component.ts

10
QuickStart

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

AppComponent o componente principal da aplicao

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.

O Quickstart tem somente um extremamente simples componente, mas ele possui a

estrutura inicial que todo componente deve ter:

Uma ou mais declaraes import que referenciam as classes que necessitam

Um decorator @Component que diz ao Angular qual template usar e como o
componente criado.
Uma classe do componente que controla a aparncia e o comportamento da
visualizao atravs do 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.

Quando precisamos de algo para um mdulo ou biblioteca, importamos. Aqui importamos o

angular2/core para que o componente possa ter acesso ao decorator @Component .

app/app.component.ts (import)

import { Component } from '@angular/core';

@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

@Component o decorator que permite associar metadados com a classe do coponente. Os

metadados dizem ao Angular como criar e usar o componente.

app/app.component.ts (metadata)

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})

Neste metadado em particular possui dois campos, o selector e o template .

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)

export class AppComponent { }

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

import { bootstrap } from '@angular/platform-browser-dynamic';

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

bootstrap(AppComponent);

Importamos duas bibliotecas que so necessrias para carregar a aplicao:

platform-browser-dynamic que contm a funo bootstrap

O componente raiz da aplicao, AppComponent

Ento podemos chamar bootstrap with AppComponent

Bootstrap platform-specific

Note que importamos a funo bootstrap de @angular/platform-browser-dynamic e no

@angular/core . O bootstrap no est no @angular/core porque no h uma nica forma de

iniciar a aplicao. Na verdade, a maioria das aplicaes que executam em um navegador

chamam a funo bootstrap desta biblioteca.

Mas possvel carregar um componente em um ambiente diferente. Podemos carregar a

aplicao em um dispositivo mobile com Apache Cordova ou Native Script. Pode-se querer
renderizar a primeira pgina de nossa aplicao no servidor para melhorar a performance
ou facilitar o SEO. Nestes casos, importar diferentes tipos de bootstrap requerem importar
de bibliotecas diferentes.

** Porque criamos em separado os arquivos main.ts e app.component.ts ?

Ambos main.ts e app.component.ts so pequenos. Este somente um QuickStart.

Poderamos juntar estes dois arquivos em um e separar um pouco a complexidade de ter
ambos.

Preferimos demonstrar de forma correta como estruturar uma aplicao no Angular. O

conceito de bootstrap da aplicao diferente de sua visualizao. Misturar conceitos cria
uma dificuldade ao longo do caminho. Preferimos lanar o AppComponent em mltiplos
ambientes com mltiplos boostraps. Testar o componente muito mais fcil se ele no tenta
iniciar a aplicao. Fazemos um pequeno esforo agora para fazer do jeito mais correto.

13
QuickStart

Passo 4: Adicionar index.html

Na raiz do projeto cire o arquivo index.html e cole o seguinet cdigo:

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>

O arquivo index.html define a pgina web que contm a aplicao.

As sees mais importantes deste arquivo so:

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.

Fizemos diferentes escolhas na incluso das bibliotecas a medida que chegamos a um

consenso sobre a qualidade do carregamento em ambiente de produo, baseados no
tempo de recarga e consumo de memria.

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.

Todos os gerenciadores de bibliotecas demandam configurao e sempre aumentam de

complexidade a medida que o seu projeto cresa.

Ns recomendamos que esteja bem informado sobre o seu gerenciador de mdulos de

preferncia. Aprenda mais sobre o SystemJS aqui

Com estas preocupaes em mente, o que estamos fazendo no arquivo

systemjs.config.js ? Primeiro, criamos um map para dizer ao SystemJS onde olhar

quando ele for importar algum mdulo. Ento, registramos todos os pacotes para o
SystemJS : todas as dependncias de projeto e a aplicao app .

O QuickStart no usa todas os pacotes listados, mas os outros exemplos da

documentao ou qualquer aplicao um pouco mais complexa precisar de todos
eles.

No h problemas em adicionar pacotes no SystemJS que no sero usados, pois eles

sero carregados somente quando forem requisitados.

O pacote app diz ao SystemJS o que deve ser carregado quando uma requisio ao
mdulo app for feita, no diretrio app .

O Quickstart faz as requisies quando no TypeScript so encontrados expresses como

esta:

app/main.ts

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

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.

Compilando diretamente no navegador

No exemplo exibido no plunker, a compilao para Javascript realizada em tempo

real. Isto aceito para uma demo.

No compile em tempo de execuo no desenvolvimento ou produo

Recomendamos fortemente que compile a aplicao do TypeScript para Javascript

antes de executar a aplicao, por diversas razes, tais como:

-Erros de compilao que so invisveis ao navegadores podero ser vistos -A pr

compilao simplifica o processo de carregamento de mdulos e muito mais fcil
diagnosticar problemas quando o processo realizado de forma separada, em um
passo externo. -Pr compilao resulta em uma experincia mais rpida para o
usurio, pois o navegador no perde tempo compilando os arquivos TypeScript. -A
iterao de desenvolvimento mais rpida porque somente os arquivos alterados so
recompilados. Com o crescimento da aplicao, a quantidade de arquivos aumenta
tambm.
-Precompilao combina bem com integrao contnua nos processos de compilao,
teste e deploy.

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.

Todos os outros mdulos so carregados atravs de requisies feitas atravs do comando

import ou pelo prprio Angular.

Adicionando algum estilo

Estilos no so essenciais mas eles so legais, e index.html adiciona um estilo chamado
style.css

Crie o arquivo style.css na raiz do projeto e adicione alguns estilos. O arquivo completo
style.css pode ser encontrado aqui.

style.css (em parte)

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
*/

Passo 5: Compile e rode!

Abra uma janela de terminal e entre com o seguinte comando:

npm start

Este comando executa dois processos em paralelo:

1. O compilador Typescript em "watch mode" (Sempre que houver modificao no

arquivo .ts, ele recompila para o arquivo .js)

1. Um servidor esttico chamado lite-server que carrega o arquivo index.html no

navegador e atualiza o navegador cada vez que os arquivos da aplicao so
alterados.

Em seguida o navegador deve abrir e exibir a seguinte mensagem:

Bom trabalho!

Faa algumas mudanas

Tente mudar a mensagem para "My SECOND Angular 2 app".

17
QuickStart

O TypeScript ir recompilar e o lite-server estar observando. Ele deve detectar a

alterao e atualizar o navegador, e a nova mensagem ser exibida. uma maneira
interessante de desenvolver uma aplicao.

Feche a janela do console para terminar ambos os processos, de recompilao do

Typescript e do servidor.

Resumindo
O projeto final fica com a seguinte estrutura:

O contedo de cada arquivo exibido a seguir:

app/app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

app/main.ts

18
QuickStart

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
bootstrap(AppComponent);

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

O que vem a seguir?

Esta aplicao no faz muita coisa. basicamente um "Hello World" para Angular 2.

Deixamos simples para um primeiro passo: escrevemos um pequeno componente Angular,

criamos um simples index.html e executamos um servidor web. tudo que que
precisamos para uma aplicao "Hello, world".

23