Locaweb - Edição 63

59 / 68

59
Diretivas Trazem funcionalidades
adicionais ao HTML no Angular.
É possível “inventar” elementos
próprios, ampliando os elementos
padrões como <acordion>, <grid>,
<ligthbox> etc., como nestes
exemplos:
HTML personalizado:
<meuObjeto></ meuObjeto >
Atributos
<div data- meuObjeto ><
div>
Classe
<div class=”meuObjeto”><
div>
Como regra geral, controlador
não deve manipular o DOM
diretamente, e sim as diretivas.
)OH[LELOLGDGH FRPëOWURV Filtrar
dados antes que sejam exibidos
pode envolver algo simples, como
formatar casas decimais ou inverter
a ordem de uma matriz, ou algo
PDLV FRPSOH[R FRPR íOWUDU FRP
base em um parâmetro ou paginar
um resultado. Com o Angular, é
SRVV¯YHO FULDU íOWURV SDUD JHUDU
XPD WDEHOD +70/ FODVVLíF£YHO
rapidamente, sem código Java.
Escrever menos código
0RGHORV GH GDGRV íFDP PDLV
simples de escrever, sem
“getters” e “setters” e não é
preciso formatar os dados de
exibição manualmente. Uma das
vantagens mais interessantes na
divisão de diretivas é que equipes
diferentes de desenvolvimento
podem trabalhar em paralelo.
2V íOWURV SRGHP PDQLSXODU RV
dados do view sem ser necessário
alterar os controladores.
Dependency injection Para
gerenciar controladores e escopo,
o Angular usa o Dependency
Injection (injeção de dependência,
DI). Como controladores dependem
do DI para passar informações, é
possível testar a unidade injetando
dados no controle e analisando
as saídas e o comportamento. O
Angular já tem nele um provedor
HTTP simulado que retorna
respostas falsas ao controlador,
para testar seu comportamento.
INSTALAÇÃO
AngulasJS é uma biblioteca JS,
e pode ser baixada neste link:
. Angular 2
ou Angular.IO é um framework,
precisa ser instalado e depende
de outros componentes. Pode ser
baixado neste link: .
io. Angular.IO depende do Node.
js e npm. A versão mais simples
do Node.js (LTS) é a 4.5, mas o
Angular.IO precisa de uma versão
5.x ou maior. Então é preciso baixar
e instalar a v6.5 disponível no link:
CRIE UM DIRETÓRIO
PARA A APLICAÇÃO
No prompt, digite estes comandos,
que criam um diretório para
aplicação Angular 2 e o acessa:
C:> Mkdir angular2-teste
C:>CD angular2-teste
CRIE SCRIPTS
DE INSTALAÇÃO
Arquivo package.json
{
[ANGULAR USA HTML PARA DEFINIR A INTERFACE, UMA
LINGUAGEM DECLARATIVA: MAIS FÁCIL DO QUE RECORRER
AO JAVASCRIPT PARA DEFINI-LA PROCESSUALMENTE]
"name": "angular2-teste",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent
\"npm run tsc:w\" \"npm
run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-
eta.0",
"systemjs": "0.19.6",
"es6-promise": "3.0.2",
"es6-shim": "0.33.3",
"reflect-metadata":
0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "1.0.0",
"lite-server": "1.3.1",
"typescript": "1.7.3"
}
Para instalar arquivos e
dependências, usamos este
comando npm (pode demorar):
C:\angular2-teste>npm
install
1R íQDO WHUHPRV XP
subdiretório chamado node_
Angular.IO precisa da versão 5.x do Node.js,
que está em
A biblioteca AngularJS pode ser baixada em
REVISTA LOCAWEB