Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop Introdução a AngularJS

B2519015997dff04abe2568ebb2cf729?s=47 Opensanca
September 17, 2015

Workshop Introdução a AngularJS

Esse workshop foi ministrado pelo Guilherme Cabrini fornecendo uma base para quem está querendo iniciar seus estudos usando o framework mais popular da Google o AngularJS.

O workshop evidenciou sobre diretivas: ng-app, ng-init, ng-bind, bg-repeat, ng-if, ng-include, ng-class, controller, model e view.

B2519015997dff04abe2568ebb2cf729?s=128

Opensanca

September 17, 2015
Tweet

More Decks by Opensanca

Other Decks in Programming

Transcript

  1. Workshop Guilherme Cabrini da Silva - gcabrini.silva@gmail.com

  2. O que iremos ver - Configuração ambiente - O que

    é? - Hello Angular - Diretivas - MVC - $scope e $rootScope - $digest, $watch e $apply - $providers - $http - $q
  3. O que iremos ver - $injector - $routeProvider - ngMessages

    - $element - Angular 2 - Conclusão
  4. Configuração ambiente - Instalar Git sudo apt-get install git git-gui

    gitk https://git-scm.com/download/win (windows) http://192.168.10.109:8080/ - Clonar o repositório git clone https://github.com/gcabrini/workshop-angular.git
  5. Configuração ambiente - Instalar Nodejs sudo apt-get install nodejs -

    Fazer link simbolico para node sudo ln -s /usr/bin/nodejs /usr/bin/node - Instalar nodemon sudo npm install -g nodemon - Testar comando node
  6. Configuração ambiente - Instalar npm sudo apt-get install npm https://nodejs.org/en/download/

    (windows)
  7. Configuração ambiente - Instalar Bower sudo npm install -g bower

    - Instalar Gulp sudo npm install -g gulp - Instalar http-server sudo npm install -g http-server
  8. Configuração ambiente - Instalar MongoDB http://docs.mongodb.org/master/tutorial/install-mongodb-on-ubuntu/?_ga=1. 106828481.319431498.1442456626 https://www.mongodb.org/downloads (windows)

  9. Configuração ambiente - Editor de texto a sua escolha -

    Browser a sua escolha - que não seja o IE, nada pessoal =/
  10. O que é - “AngularJS é um framework JavaScript open-source,

    mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, sob o padrão model–view–controller (MVC), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. - A biblioteca lê o HTML que contém tags especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representado por variáveis JavaScript comuns. O valor dessas variáveis JavaScript podem ser setadas manualmente, ou via um recurso JSON estático ou dinâmico.” Wikipedia
  11. O que é - MVC - Abstrair a manipulação do

    DOM (diretivas) - Facilitar testes - Two way Data-binding - Injeção de dependências - IE9 + (angular v1.3+) - Curva de aprendizado + vocabulário
  12. O que é

  13. O que é

  14. Hello Angular Referência boas práticas: https://github.com/johnpapa/angular-styleguide - Criar estrutura de

    pastas - Instalar dependências bower - Criar index.html - Executar http-server no diretório raiz: http-server . -c-1
  15. Hello Angular

  16. Diretivas - São extensões da linguagem HTML que permitem a

    implementancão de comportamentos de forma declarativa - Exemplos: ng-app, ng-init, ng-click, ng-model, etc...
  17. Diretivas - ng-app Diretiva root da sua aplicação, responsável por

    inicializar a sua aplicação
  18. Diretivas - ng-init Responsável por inicializar valores de variáveis

  19. Diretivas - ng-init

  20. Diretivas - ng-bind Responsável por substituir seu conteúdo por uma

    expressão e atualiza-la quando necessário
  21. Diretivas - ng-bind

  22. Diretivas - {{ expressão }} Comportamento semelhante ao ng-bind

  23. Diretivas - ng-cloak Responsável por esconder html que não esteja

    compilado pelo angular // css [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
  24. Diretivas - ng-cloak

  25. - Models - são propriedades do $scope, $scopes são anexados

    ao DOM onde suas propriedades são acessadas através dos bindings - Views - são os templates de nossa aplicação que contem as diretivas - Controllers - são as nossas “classes”, responsáveis por conter regras de negócios e manipulação do $scope (funções e valores de models) MVC
  26. MVC

  27. - ng-model Responsável por “ligar” a view com a lógica

    de um ng-controller - Permite validações: required, email, number, url - Controle de classes css: valid/invalid, dirty/pristine e erros de validações - Registra um controle de validação no <form> pai do elemento MVC
  28. - ng-model MVC

  29. - ng-model Classes css: - ng-valid e ng-invalid: model é

    válido ou não. - ng-valid-[key] e ng-invalid-[key]: adicionada para cada validação. Exemplo: para validação ng-required serão adicionadas as classes ng- valid-required e ng-invalid-required. - ng-pristine e ng-dirty: se o valor do model foi alterado ou não. - ng-touched e ng-untouched: se o model foi “tocado” (focus, blur). MVC
  30. - filter Responsável por formatar o valor de uma expressão

    na view. Podem ser usados em templates de view, controllers ou services Filter
  31. - filter Filter

  32. - ng-controller Diretiva responsável por gerenciar as alterações em nossa

    página a partir do $scope MVC
  33. - ng-controller MVC

  34. - ng-controller Controller as vm: sintaxe semelhante a uma função

    construtora no angular MVC
  35. - ng-controller MVC

  36. - $scope Um objeto simples de comunicação Representa a área

    de acesso de um determinado controller $scope e $rootScope
  37. - $rootScope Um scope acessado/compartilhado de qualquer lugar Todo module

    possui um $scope e $rootScope
  38. - $rootScope $scope e $rootScope

  39. - $digest Responsável por “automagicar” a nossa página - O

    ciclo de $digest é iniciado toda vez que há alteração em um model - Controla todos os $watchers do scope - Todos os watchers são executados a cada ciclo de $digest $digest
  40. - $watcher Responsável por disponibilizar um callback a cada alteração

    do model - É disparado no ciclo do $digest - Quando o watcher é disparado pelo $digest, ele verifica se o valor do model no scope é diferente e caso seja, dispara o seu callback $watcher
  41. - $watcher $watcher

  42. - $apply Responsável por executar o $digest - O angular

    exibe na view o conteúdo dos models assim que são alterados - Sua chamada é necessária caso a alteração em um model seja feita fora do contexto do angular. Exemplo: setTimeout, setInterval e dentro de uma diretiva criada - O Angular pode detectar suas alterações no model, caso não, use o apply $apply
  43. - $apply $apply

  44. - ng-click Responsável por executar uma expressão quando um elemento

    é clicado Diretivas
  45. - ng-click Diretivas

  46. - ng-repeat Responsável por iterar uma lista Diretivas

  47. - ng-repeat Diretivas

  48. - ng-list Responsável por iterar os valores em um model

    Diretivas
  49. - ng-list Diretivas

  50. - ng-class Responsável por adicionar classes css no elemento de

    acordo com uma expressão Diretivas
  51. - ng-class Diretivas

  52. - ng-if Responsável por executar uma expressão condicional Diretivas

  53. - ng-if Diretivas

  54. - ng-show Responsável por exibir um elemento baseado em uma

    expressão condicional Diretivas
  55. - ng-show Diretivas

  56. - ng-include Responsável por buscar, compilar e incluir um html

    externo por meio de uma requisição $http Diretivas
  57. - ng-include Diretivas

  58. Diretivas No angular é possível criar diretivas customizadas Atributos principais:

    - template e templateUrl: html que será exibido na diretiva - restrict: A (atributo), E (elemento) e C (classe) - link: função para manipular DOM
  59. - MVCS Services: camada responsável por conter código reaproveitado. $providers

  60. - $provide É um serviço que contêm funções que registram

    componentes para o $injector - Muitas dessas funções são expostas ao “angular.module” - Funções: provider, constant, value, factory e service $providers
  61. - Providers Factory: será recuperado apenas o que está no

    “return”. Service: será recuperado uma instância da função (função construtora). Provider: será recuperado apenas o que está no método $get. Constant: será recuperado o valor, que não deve ser alterado e não é interceptada pelo decorator. Value: será recuperado o valor e pode ser alterado. Decorator: pode modificar ou encapsular outros providers. $providers
  62. - Factory $providers

  63. - Service $providers

  64. - Provider $providers

  65. - Constant $providers

  66. - Value $providers

  67. - Decorator $providers

  68. - $http Serviço responsável por realizar requisições AJAX - $http.get

    - $http.head - $http.post - $http.put - $http.delete - $http.jsonp - $http.patch $http
  69. - $http $http

  70. - $http $http

  71. - $http $http

  72. - $http $http

  73. - $http $http

  74. $http

  75. - Promisses Promisses são o resultado final de uma operação

    seja ela sucesso ou falha $http
  76. $q - $q - Serviço para realizar execução de funções

    assíncronas Métodos: - resolve - reject - notify
  77. $q

  78. - $injector Utilizado para obter uma instância de um objeto

    definido pelo $provide, instanciar tipos, invocar metodos e carregar modulos $injector
  79. - $routeProvider Utilizado para configurar rotas $routeProvider

  80. $routeProvider

  81. - ngMessages Diretiva para exibir e esconder uma determinada mensagem

    de validação - Dependência ngMessages ngMessages
  82. ngMessages

  83. - $element Responsável por manipular elementos do DOM - É

    um alias para o jQuery (caso esteja incluido) - jqLite - semelhante ao jQuery - Utilizar apenas se não existir outra solução $element
  84. - $element Algumas funções: - addClass, hasClass, removeClass - attr,

    removeAttr - append, prepend - parent, children - html, text - find, eq - css $element
  85. - Angular 2 - Performace 3x - 5x mais rápido

    - Sintaxe ES6 - Template precompilado e reuso - View caching Angular 2
  86. Conclusão

  87. Obrigado!