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.