traducao da documentacao oficial do angular2

Prévia do material em texto

1.1
1.2
Table	of	Contents
Introduction
QuickStart
2
Tradução	da	documentação	oficial	do
angular.io
Este	livro	é	uma	tradução	livre	para	o	português	da	documentação	oficial	do	site
angular2.io.
Contribuições
Contribuições	são	bem	vindas.	Para	contribuir	basta	forkar	o	projeto	e	enviar	os	PRs.
Status
No	momento	apenas	o	quickstart	está	traduzido.	Estamos	aguardando	o	lançamento	oficial
do	angular	2	para	traduzir	toda	a	documentação.
Introduction
3
QuickStart
Nota	do	tradutor:	A	documentação	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	aplicação	em	Angular	2	com
Typescript,	e	estabelecer	um	ambiente	de	desenvolvimento	para	o	restante	dos	exemplos
da	documentação	que	são	a	base	para	aplicações	reais.
Não	precisa	de	Typescript?
Embora	estamos	começando	em	Typescript,	você	pode	escrever	aplicações	em
Angular	2	com	Dart	ou	Javascript.	Basta	selecionar	a	linguagem	no	combobox	no	topo
do	site.
Testando	a	aplicação
Teste	o	exemplo	no	qual	carrega	a	aplicação	no	plunker	e	exibe	a	seguinte	mensagem:
Construa	a	aplicação!
Pré-requisitos:	Instalar	Node
Passo	1:	Crie	o	diretório	da	aplicação	e	defina	a	dependência	de	pacotes	e	a
configuração	de	projeto.
Passo	2:	Crie	o	componente	raiz	da	aplicação	Angular.
Passo	3:	Adicione		main.ts	,	identificando	o	componente	raiz	para	o	Angular.
Passo	4:	Adicione		index.html	,	a	página	web	que	contém	a	aplicação.
Passo	5:	Construa	e	execute	a	aplicação.
Faça	algumas	mudanças	na	aplicação
Conclusão
Pré-requisitos:	Instalar	Node
Instale	Node.js®	e	npm	se	você	ainda	não	o	possui	em	seu	computador.
QuickStart
4
Verifique	se	você	está	executando	pelo	menos	a	última	versão	do	node		v5.x.x		e
npm		v.3.x.x		executando	o	comando		node	-v		e		npm	-v		em	um	terminal/console.
Versões	antigas	podem	gerar	erros.
	
Download	do	código	fonte
Ao	invés	de	seguir	cada	passo	destas	instruções,	pode-se	realizar	o	download	do
código	fonte	pelo	github	e	seguir	as	instruções	resumidas	do	projeto.
Passo	1:	Criar	e	configurar	o	projeto
Neste	passo	vamos:
(a)	Criar	o	diretório	do	projeto
(b)	Definir	os	pacotes	e	os	arquivos	de	configuração
(c)	Instalar	os	pacotes
(a)	Criar	o	diretório	do	projeto
mkdir	angular2-quickstart
cd	angular2-quickstart
(b)	Definir	os	pacotes	e	os	arquivos	de	configuração
Adicione	ao	diretório	do	projeto	os	seguintes	arquivos	que	contém	informações	sobre	os
pacotes	e	arquivos	de	configuração:
package.json	Lista	os	pacotes	que	a	aplicação		QuickStart		depende	e	define	alguns
scripts	úteis.	Veja	Npm	Package	Configuration	para	maiores	detalhes.
QuickStart
5
{
		"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	configuração	do	compilador	do	Typescript.	Veja	Typescript
Configuration	para	maiores	detalhes
QuickStart
6
{
		"compilerOptions":	{
				"target":	"es5",
				"module":	"commonjs",
				"moduleResolution":	"node",
				"sourceMap":	true,
				"emitDecoratorMetadata":	true,
				"experimentalDecorators":	true,
				"removeComments":	false,
				"noImplicitAny":	false
		}
}
typings.json	identifica	os	arquivos	de	definição	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	configuração	do	SystemJS.	Veja	o	porquê	neste	link.
QuickStart
7
/**
	*	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
QuickStart
8
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	instalação.	Geralmente,	a
instalação	resolve	estes	erros	e	finaliza	com	sucesso.
erros	e	avisos	do	npm
Tudo	estará	bem	se	no	console	não	aparecer	mensagens	que	começarem	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	recompilação	falha,	o
pacote	se	recupera	(tipicamente	com	uma	versão	anterior)	e	tudo	funciona	bem.
Apenas	tenha	certeza	que	erros	com	mensagens		npm	ERR!		não	aparecem	até	o	fim	do
	npm	install	.
	
Adicionar	as	bibliotecas	e	pacotes	que	necessitam	do	npm
Os	desenvolvedores	de	aplicações	Angular	dependem	do	gerenciador	de	pacotes	npm
par	ainstalar	as	bibliotecas	que	as	aplicações	necessitam.	Os	desenvolvedores
Angular	recomendam	alguns	pacotes	especificados	nas	seções		dependencies		e
	devDependencies	.	Veja	o	item	sobre	os	pacotes	npm	para	mais	detalhes.
	
Scripts	Úteis
Incluímos	um	certo	número	de	scripts	npm	no	arquivo		package.json		sugerido,	para	lidar
com	as	tarefas	mais	comuns	no	desenvolvimento:
QuickStart
9
			{
			"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	)	não	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	alterações	no	código	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	alterações	nos	arquivos	Typescript,	e	recompilando	quando
uma	alteração	acontece.
	npm	run	lite		executa	o	lite-server,	um	leve	servidor	de	arquivos	que	dá	um	excelente
suporte	as	aplicações	Angular	que	usam	routing.
	npm	run	typings		executa	a	ferramenta	typings	separadamente
	npm	run	postinstall		chamado	pelo	npm	automaticamente	após	completar	com
sucesso	a	instalação	dos	pacotes.	Este	script	instala	os	arquivos	de	[definição	do
Typescript]	definidos	no		typings.json	.
Estamos	com	tudo	pronto.	Vamos	escrever	um	pouco	de	código.
Passo	2:	Nosso	primeiro	componente	Angular
Vamos	criar	um	diretório	que	conterá	nossa	aplicação	e	adiciona	um	super-simples
componente	Angular.
Crie	o	sub	diretório	app	na	raiz	do	projeto:
mkdir	app
Crie	o	componente		app/app.component.ts		(no	novo	diretório	criado)	com	o	seguinte	código:
app/app.component.ts
QuickStart
10
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	aplicação
Toda	aplicação	Angular	deve	conter	pelo	menos	um	componente	principal,	por	convenção
chamamos	de		AppComponent	.	Componentes	são	como	blocos	de	uma	aplicação	Angular.
Um	componente	tem	controle	sobre	uma	parte	da	tela	-	a	view	-	associada	através	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	declarações	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	aparência	e	o	comportamento	da
visualização	através	do	template.
Import
Aplicações	Angular	são	modulares.	Elas	consistem	de	muitos	arquivos,	cada	um	dedicados
para	uma	proposta.	O	próprio	Angular	é	modular.	Ele	é	uma	coleção	de	bibliotecas
modulares,	cada	uma	delas	com	um	propósito,	com	funcionalidades	relacionados	que	são
usadas	para	construir	a	aplicação.
Quando	precisamos	de	algo	para	um	módulo	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	função	que	reune	metadados	do	objeto	como	argumento.
Aplicamos	esta	função	para	para	o	classe	do	componente	prefixiando	a	função	com	o
símbolo	@	e	invocando	os	metadados	do	objeto,	logo	antes	da	classe.
QuickStart
11
	@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
instância	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	código	HTML,	anunciando	"My	First	Angular	2
App"	Um	template	mais	avançado	pode	conter	data	bindings	para	propriedades	do
componente	e	pode	identificar	outros	componentes	da	aplicação	no	qual	possui	os
seus	próprios	templates.	Estes	templates	podem	identificar	ainda	com	outros
componentes.	É	nesta	forma	uma	que	uma	aplicação	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	aplicação	mais	complexa,	podemos
expandir	esta	classe	com	propriedades	e	lógica.	Nossa	classe		AppComponent		está	vazia
porque	não	há	a	necessidade	de	se	fazer	nada	neste	Quickstart.
Exportamos	a	classe		AppComponent		(export)	então	esta	pode	ser	importada	(import)	em
qualquer	lugar	de	aplicação,	como	veremos	ao	criar	o		main.ts	.
QuickStart
12
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	conteúdo:
app/main.ts
import	{	bootstrap	}				from	'@angular/platform-browser-dynamic';
import	{	AppComponent	}	from	'./app.component';
bootstrap(AppComponent);
Importamos	duas	bibliotecas	que	são	necessárias	para	carregar	a	aplicação:
platform-browser-dynamic	que	contém	a	função		bootstrap	
O	componente	raiz	da	aplicação,		AppComponent	
Então	podemos	chamar		bootstrap		with		AppComponent	
Bootstrap	é	platform-specific
Note	que	importamos	a	função		bootstrap		de		@angular/platform-browser-dynamic		e	não
	@angular/core	.	O	bootstrap	não	está	no		@angular/core		porque	não	há	uma	única	forma	de
iniciar	a	aplicação.	Na	verdade,	a	maioria	das	aplicações	que	executam	em	um	navegador
chamam	a	função	bootstrap	desta	biblioteca.
Mas	é	possível	carregar	um	componente	em	um	ambiente	diferente.	Podemos	carregar	a
aplicação	em	um	dispositivo	mobile	com	Apache	Cordova	ou	Native	Script.	Pode-se	querer
renderizar	a	primeira	página	de	nossa	aplicação	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		são	pequenos.	Este	é	somente	um	QuickStart.
Poderíamos	juntar	estes	dois	arquivos	em	um	e	separar	um	pouco	a	complexidade	de	ter
ambos.
Preferimos	demonstrar	de	forma	correta	como	estruturar	uma	aplicação	no	Angular.	O
conceito	de	bootstrap	da	aplicação	é	diferente	de	sua	visualização.	Misturar	conceitos	cria
uma	dificuldade	ao	longo	do	caminho.	Preferimos	lançar	o		AppComponent		em	múltiplos
ambientes	com	múltiplos	boostraps.	Testar	o	componente	é	muito	mais	fácil	se	ele	não	tenta
iniciar	a	aplicação.	Fazemos	um	pequeno	esforço	agora	para	fazer	do	jeito	mais	correto.
QuickStart
13
Passo	4:	Adicionar		index.html	
Na	raiz	do	projeto	cire	o	arquivo		index.html		e	cole	o	seguinet	código:
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	apágina	web	que	contém	a	aplicação.
As	seções	mais	importantes	deste	arquivo	são:
1	As	bibliotecas	Javascript
2	Arquivo	de	configuração	do		systemJS	,	e	o	script	que	importa	e	executa	a	aplicação
referente	ao	arquivo		main		que	foi	escrito.
3	A	tage		<my-app>		no		<body>		no	qual	a	aplicação	reside
Bibliotecas
As	seguinte	são	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>
QuickStart
14
Começamos	com		core-js	shim		no	qual	cria-se	patches	para	o	contexto	global	(window)
com	funcionalidades	essenciais	para	o	ES6.	As	próximas	bibliotecas	são		zone.js		e
	reflect-metadata	.	Então	a	biblioteca		SystemJS		é	adicionada	para	carregar	os	módulos
extras.
Fizemos	diferentes	escolhas	na	inclusão	das	bibliotecas	a	medida	que	chegamos	a	um
consenso	sobre	a	qualidade	do	carregamento	em	ambiente	de	produção,	baseados	no
tempo	de	recarga	e	consumo	de	memória.
SystemJS
Quickstart	usa	o		SystemJS		para	carregar	a	aplicação	e	seus	módulos.	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	não	uma	precisa	ser	mandatória.
Todos	os	gerenciadores	de	bibliotecas	demandam	configuração	e	sempre	aumentam	de
complexidade	a	medida	que	o	seu	projeto	cresça.
Nós	recomendamos	que	esteja	bem	informado	sobre	o	seu	gerenciador	de	módulos	de
preferência.	Aprenda	mais	sobre	o	SystemJS	aqui
Com	estas	preocupações	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	módulo.	Então,	registramos	todos	os	pacotes	para	o
	SystemJS	:	todas	as	dependências	de	projeto	e	a	aplicação		app	.
O	QuickStart	não	usa	todas	os	pacotes	listados,	mas	os	outros	exemplos	da
documentação	ou	qualquer	aplicação	um	pouco	mais	complexa	precisará	de	todos
eles.
Não	há	problemas	em	adicionar	pacotes	no	SystemJS	que	não	serão	usados,	pois	eles
serão	carregados	somente	quando	forem	requisitados.
O	pacote		app		diz	ao	SystemJS	o	que	deve	ser	carregado	quando	uma	requisição	ao
módulo		app		for	feita,	no	diretório		app	.
O	Quickstart	faz	as	requisições	quando	no	TypeScript	são	encontrados	expressões	como
esta:
app/main.ts
	import	{	AppComponent	}	from	'./app.component';
QuickStart
15
Repare	que	o	nome	do	módulo	(depois	do	form)	não	faz	menção	a	extensão	do	arquivo.	na
configuração	do	SystemJS	já	configuramos	que	a	extensão	é		.js	,	ou	seja	um	arquivo
JavaScript.	Isso	faz	sentido	porque	compilamos	a	aplicação	do	TypeScript	para	o	Javascript
antes	da	execução	da	aplicação.
Compilando	diretamente	no	navegador
No	exemplo	exibido	no	plunker,	a	compilação	para	Javascript	é	realizada	em	tempo
real.	Isto	é	aceito	para	uma	demo.
Não	compile	em	tempo	de	execução	no	desenvolvimento	ou	produção
Recomendamos	fortemente	que	compile	a	aplicação	do	TypeScript	para	Javascript
antes	de	executar	a	aplicação,	por	diversas	razões,	tais	como:
-Erros	de	compilação	que	são	invisíveis	ao	navegadores	poderão	ser	vistos	-A	pré
compilação	simplifica	o	processo	de	carregamento	de	módulos	e	é	muito	mais	fácil
diagnosticar	problemas	quando	o	processo	é	realizado	de	forma	separada,	em	um
passo	externo.	-Pré	compilação	resulta	em	uma	experiência	mais	rápida	para	o
usuário,	pois	o	navegador	não	perde	tempo	compilando	os	arquivos	TypeScript.	-A
iteração	de	desenvolvimento	é	mais	rápida	porque	somente	os	arquivos	alterados	são
recompilados.	Com	o	crescimento	da	aplicação,	a	quantidade	de	arquivos	aumenta
também.
-Precompilação	combina	bem	com	integração	contínua	nos	processos	de	compilação,
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
aplicação.	Aproveitamos	também	para	capturar	e	exibir	erros	no	console	do	navegador.
Todos	os	outros	módulos	são	carregados	através	de	requisições	feitas	através	do	comando
	import		ou	pelo	próprio	Angular.
Adicionando	algum	estilo
Estilos	não	são	essenciais	mas	eles	são	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)
QuickStart
16
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	modificação	no
arquivo	.ts,	ele	recompila	para	o	arquivo	.js)
1.	 Um	servidor	estático	chamado		lite-server		que	carrega	o	arquivo		index.html		no
navegador	e	atualiza	o	navegador	cada	vez	que	os	arquivos	da	aplicação	são
alterados.
Em	seguida	o	navegador	deve	abrir	e	exibir	a	seguinte	mensagem:
Bom	trabalho!
Faça	algumas	mudanças
Tente	mudar	a	mensagem	para	"My	SECOND	Angular	2	app".
QuickStart
17
O	TypeScript	irá	recompilar	e	o		lite-server		estará	observando.	Ele	deve	detectar	a
alteração	e	atualizar	o	navegador,	e	a	nova	mensagem	será	exibida.	É	uma	maneira
interessante	de	desenvolver	uma	aplicação.
Feche	a	janela	do	console	para	terminar	ambos	os	processos,	de	recompilação	do
Typescript	e	do	servidor.
Resumindo
O	projeto	final	fica	com	a	seguinte	estrutura:
O	conteúdo	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
QuickStart
18
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
QuickStart
19
{
		"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
QuickStart
20
{
		"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
QuickStart
21
/**
	*	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);
QuickStart
22
O	que	vem	a	seguir?
Esta	aplicação	não	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	aplicação	"Hello,	world".
QuickStart
23
	Introduction
	QuickStart