60 / 68
60
REVISTA LOCAWEB
CODE/
ANGULAR.IO
PRGXOHV RQGH íFDU¥R RV DUTXLYRV
do Angular 2.
$UTXLYR WVFRQëJ MVRQ
(VWH DUTXLYR FRQíJXUD R
TypeScript. Crie o arquivo com este
conteúdo no diretório de teste:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution":
"node",
"sourceMap": true,
emitDecoratorMetadata":
rue,
"experimentalDecorators":
true,
"removeComments":
false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Estas são as opções padrões
para permitir que o TypeScript
gere os arquivos JS da aplicação.
Arquivo app-component.ts
Este arquivo cria o primeiro
componente Angular para o
aplicativo de teste. O conteúdo do
arquivo importa o “Component”
do Angular, cria um componente
SDUD R DSOLFDWLYR H GHíQH VXD
estrutura e código. Primeiro,
criamos um diretório app:
C:\angular2-teste>mkdir app
C:\angular2-teste>cd app
E criamos o arquivo app-
component.ts com este conteúdo:
import {Component} from
'angular2/core';
@Component({
selector: 'meu-app',
template: '<h1>Meu
primeiro app com o Angular
2!!!</h1>'
})
export class AppComponent{}
Selector é o atributo do
nome da “tag” HTML usada
no arquivo de exibição; template
contém o código para esse
componente.
$UTXLYR DSS ERRW WV
Mantendo o conceito de
separar os elementos do
sistema, esse arquivo é
responsável por inicializar o
Angular e preparar a app para
exibição. Seu conteúdo é este:
import {bootstrap} from
'angular2/platform/browser'
import {AppComponent} from
'./app-component'
bootstrap(AppComponent);
São duas tarefas no código
acima: inicializar o Angular
2, com “bootstrap” e tornar o
componente app-component
o “componente-pai”. Desse
componente sairão módulos-
íOKRV QD DSOLFD©¥R
Arquivo index.html
3DUD íQDOL]DU WHPRV R DUTXLYR
index.html, que será executado
quando a página/app for
acessada. Seu conteúdo é este:
<html>
<head>
Com todos os arquivos
preparados, basta inicializar a
aplicação com o comando:
C:\angular2-teste\app\
npm start
O navegador será aberto e
a página será apresentada como
na imagem do pé da página.
Mas por que tantos arquivos,
componentes, instalações para
gerar um simples Hello World
na tela? Qual a vantagem? Por
que não digitar simplesmente o
código no arquivo index.html?
Porque a partir desse
ponto é possível ampliar o
aplicativo com mais facilidade,
segurança, testar rapidamente
mudanças, ler dados em
'20 VHSDUDGRV FRGLíFDU
saídas de tela em um arquivo
separado, enquanto outra
equipe lida com dados e
recordsets (veja uma pequena
mudança no componente no
arquivo app-component.js na
imagem no topo da página 61).
Dados, conexões e data
binding
Um dos aspectos
principais do Angular é o
two-way data binding, associação
de dados bidirecional. Alterações
QR YLHZ V¥R UHîHWLGDV QD
fonte de dados e atualizações
QHOHV UHîHWHP QD YLHZ VHP
necessidade de manipular
diretamente o DOM. Um exemplo
simples em Angular 2:
// o componente
import {Component} from
'angular2/core';
@Component({
selector: 'cadastro',
templateUrl: 'cadastro.
html'
})
<title>Angular 2
Primeiro Aplicativo</title>
<!-- Carregar as
bibliotecas Angular -->
<script src="node
modules/angular2/bundles
angular2-polyfills.js"><
script>
<script src="node
modules/systemjs/dist
system.src.js"></script>
<script src="node
modules/rxjs/bundles/
x.js"></script>
<script src="node
modules/angular2/bundles
angular2.dev.js"></script>
<!-- Configura o
SystemJS, que é responsável
por carregar os arquivos
js -->
<script>
System.config({
packages: {
app: {
format:
'register',
defaultExtension: 'js'
}
}
});
System.import('app
boot').then(null, console
error.bind(console));
</script>
</head>
<!-- Exibe a
página -->
<body>
<meu
app>Carregando...</meu-app>
</body>
</html>
[
SELECTOR É O ATRIBUTO DO NOME DA “TAG”
HTML USADA NO ARQUIVO DE EXIBIÇÃO; TEMPLATE
CONTÉM O CÓDIGO PARA ESSE COMPONENTE
]
Hello World!: no navegador, exemplo de app criado com o Angular 2