O documento introduz o AngularJS, uma estrutura para desenvolvimento de aplicações de página única, discutindo sua arquitetura, conceitos principais como módulos, controladores, e injeção de dependências. Ele apresenta exemplos práticos de utilização de diretivas, two way data binding, serviços REST, e a biblioteca angular-resource para acesso a APIs. Além disso, menciona a possibilidade de desenvolver aplicações para dispositivos móveis com o Ionic Framework.

1. ANGULAR JS
Introdução

2. AGENDA
➤ 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

3. 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.

4. FILOSOFIA
➤ Programação declarativa
➤ Interface do usuário
➤ Conexão entre componentes
➤ Programação imperativa
➤ Lógica de negócios

5. HÃ ?!

6. 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.

7. EXEMPLO

8. EXEMPLO
Carregamento do Angular.js

9. EXEMPLO
Carregamento do script da aplicação

10. EXEMPLO
Parte “declarativa”

11. EXEMPLO
Parte “declarativa”
Atenção aos
atributos
ng-xxx
!

12. EXEMPLO
Essa é a aplicação “LojaOnline”

13. EXEMPLO
Os dados desse bloco vêm do controlador
ProdutosCtrl

14. EXEMPLO
Repita essa tag (li) para cada
produto da lista de produtos (controlador)

15. EXEMPLO
Exiba o nome do produto e o seu valor

16. 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 !

17. ARQUITETURA MVC
Controller
View
Model

18. ARQUITETURA MVC
Controller
View
Model
1
Inicialização:
O controller prepara os dados que serão
exibidos assim que a página for exibida.

19. ARQUITETURA MVC
Controller
View
Model
2
Esses dados podem ser
solicitados ao model.

20. ARQUITETURA MVC
Controller
View
Model
3 Os dados são então preparados
para ser exibidos ao usuário

21. ARQUITETURA MVC
Controller
View
Model
4
Os dados prontos são enviados para a
view que os formata e exibe

22. EXEMPLO DE CONTROLADOR

24. APP.JS
Definição do módulo principal da aplicação

25. APP.JS
Criando um controlador ‘ProdutosCtrl’

26. APP.JS
No $scope deve ser definido os dados e
funções (model) que serão acessíveis da
página (view)

27. APP.JS
Criando um array de produtos
disponíveis para a página

28. COMO TUDO SE CONECTA

29. index.html
app.js

30. index.html
app.js

31. index.html
app.js

32. index.html
app.js

33. index.html
app.js

34. index.html
app.js

35. index.html
app.js

36. RESULTADO

37. PRINCIPAIS CONCEITOS

38. PRINCIPAIS CONCEITOS
➤ Diretivas
➤ Expressões
➤ Módulos
➤ Controladores
➤ Two way data binding
➤ Fábricas
➤ Injeção de Dependências

39. 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;

40. 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>

41. 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”]);

42. 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

43. 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) { … });

44. 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

45. TWO WAY DATA BINDING
➤ “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.

46. TWO WAY DATA BINDING - EXEMPLO

47. TWO WAY DATA BINDING - EXEMPLO
Campo de texto ligado à variável nome

48. TWO WAY DATA BINDING - EXEMPLO
Essa tag e seu conteúdo só serão exibidos se
houver um valor ‘nome’ definido no escopo

49. RESULTADO
À medida que você digita o valor do campo, o texto
abaixo é atualizado automaticamente !

50. 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; }
};
});

51. 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);
});

52. SERVIÇOS REST
➤ O que são ?
➤ História
➤ Verbos
➤ Exemplos

53. 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:
{"bairro": "Jardim Tavares", "logradouro": "Avenida Marechal Floriano
Peixoto", "cep": "58402000", "uf": "PB", "localidade": "Campina Grande"}

54. 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);

55. EXEMPLO $HTTP - INDEX.HTML

56. EXEMPLO $HTTP - INDEX.HTML
Campo de texto ligado à variável cep

57. EXEMPLO $HTTP - INDEX.HTML
Botão que quando clicado chama a função buscar

58. EXEMPLO $HTTP - INDEX.HTML
Essa tag e seu conteúdo só serão exibidos se
houver um valor ‘endereco’ definido no escopo

59. EXEMPLO $HTTP - APP.JS

60. EXEMPLO $HTTP - APP.JS
Utilizaremos o componente $http

61. EXEMPLO $HTTP - APP.JS
URL base do serviço REST

62. EXEMPLO $HTTP - APP.JS
Variável cep ligada com o campo de
texto na página

63. EXEMPLO $HTTP - APP.JS
Função buscar chamada quando o
botão da página é clicado

64. EXEMPLO $HTTP - APP.JS
Requisição GET feita ao serviço,
passando o cep digitado pelo usuário

65. EXEMPLO $HTTP - APP.JS
Os dados retornados pela requisição são
atribuídos à variável ‘endereco’ do escopo.

66. 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

67. 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');
});

68. EXEMPLO
➤ Carregar um conjunto de posts de um blog:

69. RESUMO DAS FUNÇÕES DO NGRESOURCE
➤ 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)

70. 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/
➤ Apresentação disponível no slideshare;
➤ Exemplos disponíveis no github.