Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

9

Share

Download to read offline

Angular js

Download to read offline

Introdução teórica ao framework AngularJS, descrevendo sobre sua arquitetura e integração com serviços RESTful

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Angular js

  1. 1. ANGULAR JS Introdução
  2. 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. 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. 4. FILOSOFIA ➤ Programação declarativa ➤ Interface do usuário ➤ Conexão entre componentes ➤ Programação imperativa ➤ Lógica de negócios
  5. 5. HÃ ?!
  6. 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. 7. EXEMPLO
  8. 8. EXEMPLO Carregamento do Angular.js
  9. 9. EXEMPLO Carregamento do script da aplicação
  10. 10. EXEMPLO Parte “declarativa”
  11. 11. EXEMPLO Parte “declarativa” Atenção aos atributos ng-xxx !
  12. 12. EXEMPLO Essa é a aplicação “LojaOnline”
  13. 13. EXEMPLO Os dados desse bloco vêm do controlador ProdutosCtrl
  14. 14. EXEMPLO Repita essa tag (li) para cada produto da lista de produtos (controlador)
  15. 15. EXEMPLO Exiba o nome do produto e o seu valor
  16. 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. 17. ARQUITETURA MVC Controller View Model
  18. 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. 19. ARQUITETURA MVC Controller View Model 2 Esses dados podem ser solicitados ao model.
  20. 20. ARQUITETURA MVC Controller View Model 3 Os dados são então preparados para ser exibidos ao usuário
  21. 21. ARQUITETURA MVC Controller View Model 4 Os dados prontos são enviados para a view que os formata e exibe
  22. 22. EXEMPLO DE CONTROLADOR
  23. 23. APP.JS Definição do módulo principal da aplicação
  24. 24. APP.JS Criando um controlador ‘ProdutosCtrl’
  25. 25. APP.JS No $scope deve ser definido os dados e funções (model) que serão acessíveis da página (view)
  26. 26. APP.JS Criando um array de produtos disponíveis para a página
  27. 27. COMO TUDO SE CONECTA
  28. 28. index.html app.js
  29. 29. index.html app.js
  30. 30. index.html app.js
  31. 31. index.html app.js
  32. 32. index.html app.js
  33. 33. index.html app.js
  34. 34. index.html app.js
  35. 35. RESULTADO
  36. 36. PRINCIPAIS CONCEITOS
  37. 37. PRINCIPAIS CONCEITOS ➤ Diretivas ➤ Expressões ➤ Módulos ➤ Controladores ➤ Two way data binding ➤ Fábricas ➤ Injeção de Dependências
  38. 38. 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;
  39. 39. 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>
  40. 40. 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”]);
  41. 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”]); O módulo Financeiro depende do módulo Dados
  42. 42. 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) { … });
  43. 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) { … }); O controlador LojaCtrl depende do componente Produto
  44. 44. 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.
  45. 45. TWO WAY DATA BINDING - EXEMPLO
  46. 46. TWO WAY DATA BINDING - EXEMPLO Campo de texto ligado à variável nome
  47. 47. TWO WAY DATA BINDING - EXEMPLO Essa tag e seu conteúdo só serão exibidos se houver um valor ‘nome’ definido no escopo
  48. 48. RESULTADO À medida que você digita o valor do campo, o texto abaixo é atualizado automaticamente !
  49. 49. 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; } }; });
  50. 50. 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); });
  51. 51. SERVIÇOS REST ➤ O que são ? ➤ História ➤ Verbos ➤ Exemplos
  52. 52. 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"}
  53. 53. 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);
  54. 54. EXEMPLO $HTTP - INDEX.HTML
  55. 55. EXEMPLO $HTTP - INDEX.HTML Campo de texto ligado à variável cep
  56. 56. EXEMPLO $HTTP - INDEX.HTML Botão que quando clicado chama a função buscar
  57. 57. EXEMPLO $HTTP - INDEX.HTML Essa tag e seu conteúdo só serão exibidos se houver um valor ‘endereco’ definido no escopo
  58. 58. EXEMPLO $HTTP - APP.JS
  59. 59. EXEMPLO $HTTP - APP.JS Utilizaremos o componente $http
  60. 60. EXEMPLO $HTTP - APP.JS URL base do serviço REST
  61. 61. EXEMPLO $HTTP - APP.JS Variável cep ligada com o campo de texto na página
  62. 62. EXEMPLO $HTTP - APP.JS Função buscar chamada quando o botão da página é clicado
  63. 63. EXEMPLO $HTTP - APP.JS Requisição GET feita ao serviço, passando o cep digitado pelo usuário
  64. 64. EXEMPLO $HTTP - APP.JS Os dados retornados pela requisição são atribuídos à variável ‘endereco’ do escopo.
  65. 65. 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
  66. 66. 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'); });
  67. 67. EXEMPLO ➤ Carregar um conjunto de posts de um blog:
  68. 68. 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)
  69. 69. 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.
  • izackbh

    Jul. 8, 2019
  • RenanHildebrand

    Oct. 19, 2018
  • WellingtonAmericanodeOliveira

    Jan. 13, 2018
  • gflopes1

    Sep. 3, 2016
  • rutra2

    Mar. 29, 2016
  • luiz58

    Feb. 24, 2016
  • HemVidal

    Feb. 19, 2016
  • HemVidal

    Feb. 19, 2016
  • fabricioepa

    Feb. 15, 2016

Introdução teórica ao framework AngularJS, descrevendo sobre sua arquitetura e integração com serviços RESTful

Views

Total views

1,279

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

111

Shares

0

Comments

0

Likes

9

×