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.

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!