ANGULAR JS
O que veremos?
➤O que é ?
➤ Arquitetura
➤ Módulos
➤ Controladores
➤ Fábricas
➤ Injeção de Dependências
➤ Serviços REST
➤ Acesso a serviços externos
➤ Utilizando $http
➤ Módulo ngResource
ANGULAR JS - O QUE É ?
➤ https://angularjs.org/
➤ Mantida (boa parte) pelo Google
➤ Desde 2009
➤ Facilita o desenvolvimento de aplicações de única página (SPA)
➤ Utilizado por:
➤ Wolfram Alpha;
➤ Portal NBC;
➤ Intel;
➤ pelo menos mais 8.400 sites.
FILOSOFIA
➤ Programação declarativa
➤ Interface do usuário
➤ Conexão
entre
componentes
➤ Programação imperativa
➤ Lógica de negócios
HÃ?!
PROGRAMAÇÃO DECLARATIVA
➤ “O que ao invés de como”
➤ Ex:
➤ Aqui começa a aplicação;
➤ Os produtos devem ser exibidos nesse local;
➤ Se esse botão for clicado chame essa função.
EXEMPLO
EXEMPLO
Carregamento do
Angular.js
EXEMPLO
Carregamento do script da
aplicação
EXEMPLO
Parte
“declarativa”
EXEMPLO
Parte
“declarativa”
! Atenção
aos
atributos
ng-xxx
EXEMPLO
Essa é a aplicação
“LojaOnline”
EXEMPLO
Os dados desse bloco vêm do
controlador ProdutosCtrl
EXEMPLO
Repita essa tag (li) para cada
produto da lista de produtos
(controlador)
EXEMPLO
Exiba o nome do produto e o seu
valor
E A PROGRAMAÇÃO IMPERATIVA ?
➤É a parte que diz COMO as coisas são feitas !
➤A ideia é separar e organizar:
➤ Apresentação (view);
➤ Processamento e fluxo da informação (controladores);
➤ Lógica de negócio (fábricas e serviços / model);
➤ Arquitetura MVC !
ARQUITETURA MVC
Controller
Model
View
ARQUITETURA MVC
Inicialização:
O controller prepara os dados que
serão exibidos assim que a página for
exibida.
Controller
1
Model
View
ARQUITETURA MVC
Controller
2
Model
Esses dados podem
ser solicitados ao View
model.
ARQUITETURA MVC
3 Os dados são então
preparados para ser
Controller exibidos ao usuário
Model
View
ARQUITETURA MVC
Controller
Model
4
Os dados prontos são enviados para View
a view que os formata e exibe
EXEMPLO DE
CONTROLADOR
APP.JS
Definição do módulo principal da
aplicação
APP.JS
Criando um controlador
‘ProdutosCtrl’
APP.JS
No $scope deve ser definido os dados e
funções (model) que serão acessíveis
da página (view)
APP.JS
Criando um array de
produtos disponíveis para
a página
COMO TUDO SE CONECTA
index.html
app.j
index.html
app.j
index.html
app.j
index.html
app.j
index.html
app.j
index.html
app.j
index.html
app.j
RESULTADO
PRINCIPAIS
CONCEITOS
PRINCIPAIS CONCEITOS
➤ Diretivas
➤ Expressões
➤ Módulos
➤ Controladores
➤ Two way data binding
➤ Fábricas
➤ Injeção de Dependências
DIRETIVAS
➤ Atributos ng-xxx;
➤ Ex:
➤ ng-app, ng-controller, ng-repeat, ng-click;
➤ Programação declarativa;
➤ Ligam a camada de apresentação (view) com os controladores;
EXPRESSÕES
➤ {{ código JavaScript }}
➤O código é avaliado e seu resultado é exibido;
➤ Acessa os dados definidos no $scope (model) do controlador ativo;
➤ Ex:
➤ {{ 2 + 2 }}
➤ <h1> Há {{ produtos.length }} produtos cadastrados </h1>
MÓDULOS
➤ Uma aplicação Angular é dividida em módulos;
➤ Cada módulo pode conter controladores e fábricas de componentes;
➤ Um módulo pode depender de outros;
➤ Criação de um módulo:
➤ var modulo = angular.module(“nome do módulo”, [dependências]);
➤ Ex:
➤ var dados = angular.module(“Dados”, [ ]);
➤ var financeiro = angular.module(“Financeiro”, [“Dados”]);
MÓDULOS
➤ Uma aplicação Angular é dividida em módulos;
➤ Cada módulo pode conter controladores e fábricas de componentes;
➤ Um módulo pode depender de outros;
➤ Criação de um módulo:
➤ var modulo = angular.module(“nome do módulo”, [dependências]);
➤ Ex:
➤ var dados = angular.module(“Dados”, [ ]);
➤ var financeiro = angular.module(“Financeiro”, [“Dados”]);
O módulo Financeiro depende do módulo
Dados
CONTROLADORES
➤ Realizam o tratamento e o direcionamento da informação;
➤ São criados dentro dos módulos:
➤ modulo.controller(‘nome do controlador’, function(dependências) { código });
➤ Ex:
➤ app.controller('LojaCtrl', function ($scope, Produto) { … });
CONTROLADORES
➤ Realizam o tratamento e o direcionamento da informação;
➤ São criados dentro dos módulos:
➤ modulo.controller(‘nome do controlador’, function(dependências) { código });
➤ Ex:
➤ app.controller('LojaCtrl', function ($scope, Produto) { … });
O controlador LojaCtrl depende do componente Produto
“LIGAÇÃO EM DUAS DIREÇÕES”
➤É possível conectar elemento visuais com dados do escopo:
➤A alteração feita em um lado refletirá automaticamente no ouro lado;
➤ Como fazer:
➤ Na view, pode-se conectar um elemento de entrada com um valor do escopo:
➤ <input type=“text” ng-model=“nome”/>
➤ Tudo o que for digitado nesse campo, será armazenado no valor nome do escopo, e
se esse valor for alterado, o conteúdo do campo também será;
➤ Observação: expressões são automaticamente atualizadas quando o valores que ela
exibe são alterados.
“LIGAÇÃO EM DUAS DIREÇÕES”- EXEMPLO
“LIGAÇÃO EM DUAS DIREÇÕES”- EXEMPLO
Campo de texto ligado à variável
nome
“LIGAÇÃO EM DUAS DIREÇÕES”- EXEMPLO
Essa tag e seu conteúdo só serão exibidos
se houver um valor ‘nome’ definido no
escopo
RESULTADO
À medida que você digita o valor do campo, o
texto abaixo é atualizado automaticamente
!
FÁBRICAS
➤ Definem e criam componentes reutilizáveis;
➤ Lugar perfeito para implementar a lógica de negócio da aplicação;
➤ Criação de uma fábrica:
➤ modulo.factory(‘nome da fábrica’, function(dependências) { código });
➤Exemplo:
app.factory('Calculadora',
function( ) {
return {
soma: function(a,
b) { return a + b; }
};
});
INJEÇÃO DE DEPENDÊNCIAS
➤ As dependências são automaticamente instanciadas e disponibilizadas para uso, a
partir de seu nome;
➤ Ex:
var financeiro = angular.module(“Financeiro”,
[“Calculadora”]);
➤ Nesse caso, dentro do módulo financeiro, o componente Calculadora estará
disponível, será possível utilizá-lo em um controlador desse módulo, por exemplo:
financeiro.controller('FinancasCtrl', function ($scope, Calculadora) {
$scope.resultado = Calculadora.soma(2, 3);
SERVIÇOS REST
➤O que são ?
➤ História
➤ Verbos
➤ Exemplos
REST OU RESTFUL WEB SERVICES
➤ Representational State Transfer;
➤ Forma de disponibilizar serviços na web utilizando as ações do protocolo HTTP
(verbos):
➤ GET / PUT / POST / DELETE;
➤ Padrão mais utilizado para a troca de informações entre aplicações;
➤ Os dados normalmente são trocados no formado JSON ou XML;
➤ Exemplo - Requisição GET para buscar o endereço de um CEP no formato
JSON:
➤ http://cep.correiocontrol.com.br/58402000.json
➤ Retorno:
ANGULAR.JS – UTILIZANDO UM SERVIÇO REST
➤ Para o consumo e envio rápidos de dados, pode-se utilizar o módulo $http;
➤ Requisição GET:
➤ $http.get(url).then(funcao_sucesso, funcao_erro);
➤ Requisição POST:
➤ $http.post(url).then(funcao_sucesso, funcao_erro);
EXEMPLO $HTTP - INDEX.HTML
EXEMPLO $HTTP - INDEX.HTML
Campo de texto ligado à variável
cep
EXEMPLO $HTTP - INDEX.HTML
Botão que quando clicado chama a função
buscar
EXEMPLO $HTTP - INDEX.HTML
Essa tag e seu conteúdo só serão exibidos
se houver um valor ‘endereco’ definido no
escopo
EXEMPLO $HTTP - INDEX.HTML- APP.JS
EXEMPLO $HTTP - APP.JS
Utilizaremos o componente
$http
EXEMPLO $HTTP - APP.JS
URL base do serviço
REST
EXEMPLO $HTTP - APP.JS
Variável cep ligada com o campo
de texto na página
EXEMPLO $HTTP - APP.JS
Função buscar chamada quando
o botão da página é clicado
EXEMPLO $HTTP - APP.JS
Requisição GET feita ao serviço,
passando o cep digitado pelo
usuário
EXEMPLO $HTTP - APP.JS
Os dados retornados pela requisição são
atribuídos à variável ‘endereco’ do
escopo.
API PARA ACESSO A RECURSOS
➤ Entidades
(produtos, alunos, vendas, etc) são representadas como recursos e, pelo
padrão REST, são acessadas e modificadas por uma api no formato:
Verbo HTTP URL Descrição
GET / Retorna todos
GET /id Retorna um recurso
POST / Adiciona um recurso
PUT /id Modifica um recurso
DELETE /id Remove um recurso
ANGULAR.JS – UTILIZANDO UMA API REST
➤A biblioteca padrão do Angular.js disponibiliza um módulo para acesso de API’s
RESTful chamado Angular Resource (ngResource);
➤ Para utilizá-lo, é necessário:
➤ Carregar o script: /angular-resource.js
➤ Declarar a dependência do módulo: [‘ngResource’]
➤ Criar uma fábrica para cada API:
modulo.factory('Recurso', function($resource) {
return $resource('URL/:id');
});
EXEMPLO
➤ Carregar um conjunto de posts de um blog:
RESUMO DAS FUNÇÕES DO NG-RESOURCE
➤ Obter registros:
➤ query(parâmetros de busca);
➤ Obter um registro:
➤ get(identificador do registro);
➤ Salvar registro:
➤ $save( );
➤ Atualizar registro:
➤ update(identificador, novos valores);
➤ Remover registro:
➤ delete(identificador)
CONCLUSÕES
➤ Há vários plugins:
➤ http://ngmodules.org/
➤ https://angular-ui.github.io/
➤É possível desenvolver aplicações para dispositivos portáteis:
➤ Ionic Framework - http://ionicframework.com/
➤ Exemplos disponíveis no github.
