3. Eduardo Mendes (edumendes@gmail.com)
AngularJS
3
Ajuda a organizar o JS
Boa escolha para sites dinâmicos
Se comunica com jQuery
Possibilita a criação de sites interativos
Fácil de testar
Framework JS
para o lado do cliente
capaz de adicionar
interatividade ao HTML
8. Eduardo Mendes (edumendes@gmail.com)8
Directives
Uma Directive é um marcador em um tag HTML, como um atributo, que faz a ponte
entre o HTML e um código JS
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>
function HelloAngular() {
alert("Hello from Angular, World");
}
14. Eduardo Mendes (edumendes@gmail.com)14
Módulos
Onde são escritos partes de uma aplicação AngularJS
Tornam o código mais fácil de manter e de entender
Também serve para comunicar as dependências da aplicação
Módulo podem depender de outros módulos
22. Eduardo Mendes (edumendes@gmail.com)22
Controllers
Controlam o comportamento da aplicação em Angular,
através da definição de funções e valores
(function() {
var app = angular.module('livraria', []);
})();
Encapsule tudo em uma closure
Crie um controller
app.controller('LojaControle', function() {
});
var livro = {
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: ‘Descricao 1'
}
23. Eduardo Mendes (edumendes@gmail.com)23
Controllers
Controlam o comportamento da aplicação em Angular,
através da definição de funções e valores
(function() {
var app = angular.module('livraria', []);
})();
Encapsule tudo em uma closure
Crie um controller
app.controller('LojaControle', function() {
});
var livro = {
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: ‘Descricao 1'
}
this.produto = livro;
Cria uma propriedade
no controle para receber
o valor do livro
24. Eduardo Mendes (edumendes@gmail.com)24
O HTML
<!DOCTYPE html>
<html ng-app="livraria">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div>
<h1>Nome do Produto</h1>
<h2>R$ preco</h2>
<p>Descrição do Produto</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
25. Eduardo Mendes (edumendes@gmail.com)25
O HTML
<body >
<div>
<h1>Nome do Produto</h1>
<h2>R$ preco</h2>
<p>Descrição do Produto</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
ng-controller="LojaControle as loja"
26. Eduardo Mendes (edumendes@gmail.com)26
O HTML
<body >
<div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
ng-controller="LojaControle as loja"
<h1>{{loja.produto.titulo}}</h1>
<h2>R$ {{loja.produto.preco}}</h2>
<p>{{loja.produto.descricao}}</p>
32. Eduardo Mendes (edumendes@gmail.com)32
Adequando os dados à necessidade
var livro = {
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: ‘Descricao 1'
}
,
quantidade: 10
<body ng-controller="LojaControle as loja">
<div>
<div>
<h1>{{loja.produto.titulo}}</h1>
<h2>R$ {{loja.produto.preco}}</h2>
<p>{{loja.produto.descricao}}</p>
</div>
</div>
<button ng-show="{{loja.produto.quantidade > 0}}”>
Adicionar ao Carrinho
</button>
33. Eduardo Mendes (edumendes@gmail.com)33
Um acervo de livros
Normalmente se tem mais que um livro
app.controller('LojaControle', function() {
this.produto = livro;
});
var livro = {
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: 'Descricao 1',
quantidade: 10
}
34. Eduardo Mendes (edumendes@gmail.com)34
Um acervo de livros
Normalmente se tem mais que um livro
app.controller('LojaControle', function () {
this.acervo = livros;
});
var livros = [
{
titulo: 'O Senhor dos Aneis',
preco: 40.0,
descricao: 'Descricao 1',
quantidade: 10
}, {
titulo: 'A Saga Star Wars',
preco: 80.0,
descricao: 'Descricao 2',
quantidade: 0
}
]
Array
36. Eduardo Mendes (edumendes@gmail.com)36
Aplicando o ng-repeat
<body ng-controller="LojaControle as loja">
<div >
<h1>{{loja.produto.titulo}}</h1>
<h2>R$ {{loja.produto.preco}}</h2>
<p>{{loja.produto.descricao}}</p>
<button ng-show="{{loja.produto.quantidade > 0}}”>
Adicionar ao Carrinho
</button>
</div>
</div>
ng-repeat="livro in loja.acervo"
Deve ser referenciado
pela variável livro
37. Eduardo Mendes (edumendes@gmail.com)37
Aplicando o ng-repeat
<body ng-controller="LojaControle as loja">
<div >
<h1>{{livro.titulo}}</h1>
<h2>R$ {{livro.preco}}</h2>
<p>{{livro.descricao}}</p>
<button ng-show="{{livro.quantidade > 0}}”>
Adicionar ao Carrinho
</button>
</div>
</div>
ng-repeat="livro in loja.acervo"
Repetirá a div
para cada livro no array
38. Eduardo Mendes (edumendes@gmail.com)
Diretivas vistas
ng-app : anexa o Módulo da aplicação à pagina
<html ng-app=“livraria">
ng-controller : anexa o função de Controle à pagina
<body ng-controller=“LojaControle as loja”>
ng-show/ng-hide : exibe algo mediante a avaliação de uma Expressão
<h1 ng-show=“algoBooleano”>Condicionado</h1>
ng-repeat : executa um laço para cada item de um Arrau
<li ng-repeat=“livro in loja.acervo”>
81. Eduardo Mendes (edumendes@gmail.com)81
Como reaproveitar código?
<h2>
{{livro.titulo}}
<em class="pull-right">R$ {{livro.preco}}</em>
</h2>
Poderia aparecer em várias partes na aplicação
82. Eduardo Mendes (edumendes@gmail.com)82
Como reaproveitar código?
<h2>
{{livro.titulo}}
<em class="pull-right">R$ {{livro.preco}}</em>
</h2>
Criar um arquivo html e reutilizá-lo
86. Eduardo Mendes (edumendes@gmail.com)86
Como reaproveitar código?
<h2 ng-include=“'livro-preco.html'”>
</h2>
index.html
{{livro.titulo}}
<em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Onde está a diretiva???
87. Eduardo Mendes (edumendes@gmail.com)87
Como reaproveitar código?
<livro-preco></livro-preco>
index.html
{{livro.titulo}}
<em class="pull-right">R$ {{livro.preco}}</em>
livro-preco.html
Onde está a diretiva???