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.

Angular JS, você precisa conhecer

4,928 views

Published on

A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.

Published in: Technology
  • Olá, se me permite gostaria de comentar sobre meu novo livro 'AngularJS na prática' https://leanpub.com/livro-angularJS

    Obrigado!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular JS, você precisa conhecer

  1. 1. carregando...
  2. 2. levante a mão!
  3. 3. <angular-js ng-talk="meet2brains"/>
  4. 4. HTML <html> <form> <title> <tr> <ul><span> <option> <td> <input> <a> <br> <em> <table><script> <strong> <legend> <div> <select> <button> <textarea>
  5. 5. <html> <video> <header> <form> <title> <tr> <canvas> <ul><span> <option> <td> <audio> <input> <a> <br> <em> <section><script> <table> <meter> <strong> <legend> <div> <menu> <select> <button> <hgroup> <textarea> <progress>
  6. 6. <ng-view> <ng-switch> <html> <video> <header> <form> <title> <tr> <canvas> <ul><span> <option> <td> <audio> <input> <a> <br> <em> <section><script> <table> <meter> <strong> <legend> <div> <menu> <select> <button> <hgroup> <textarea> <progress> <minha-tag> ng-model=""
  7. 7. <body ng-app> platéia <input ng-model="nome"> <p>Olá, {{nome}}!</p> Olá, platéia! <script href="angular.js"/></body>
  8. 8. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/></body>
  9. 9. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/></body>
  10. 10. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/></body>
  11. 11. mas... e o CONTROLLER?
  12. 12. function SorteadorController($scope) { $scope.numero = 0; $scope.sortearNumero = function () { $scope.numero = Math.floor(Math.random() * 100); };} sorteador-controller.js
  13. 13. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/></body>
  14. 14. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/></body>
  15. 15. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/></body>
  16. 16. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/></body>
  17. 17. MVC
  18. 18. MVC$scope.model = { id: 1, nome: Farfinhos, idade: 18};
  19. 19. MVC<ul> <li ng-repeat="usuario in usuarios"> {{usuario.id}} - {{usuario.nome}} </li></ul>
  20. 20. MVCfunction Controller($scope) { $scope.model = { ... }; $scope.handlerClick = function () { ... };}
  21. 21. APP
  22. 22. APP Controller
  23. 23. ServiçoAPP Controller
  24. 24. ServiçoAPP Controller <view>
  25. 25. ServiçoAPP Controller <view> filters
  26. 26. Como usar isso tudo para montar uma aplicação single-page?
  27. 27. cria-se uma aplicação...
  28. 28. window.appTalk = angular.module(appTalk, []);
  29. 29. window.appTalk = angular.module(appTalk, []); <div ng-app="appTalk"> ... </div>
  30. 30. cria-se controllers...
  31. 31. window.appTalk .controller(SobreController, [ $scope, function ($scope){ ... código do controller ... } ]);
  32. 32. cria-se serviços...
  33. 33. window.appTalk .service(ServicoNecessario, function (){ this.funcionalidade = function () {...}; ... código do serviço ... });
  34. 34. cria-se templates...
  35. 35. <div> Detalhes sobre {{nome}}: <br> {{info}}</div>
  36. 36. configura-se as rotas...
  37. 37. window.appTalk = angular .module(appTalk, []) .config([$routeProvider, function ($routeProvider) { $routeProvider .when(/sobre, { templateUrl: sobre.html, controller: SobreController }) .when(/home, { templateUrl: home.html, controller: HomeController }) .otherwise({redirectTo: /home}); }]);
  38. 38. window.appTalk = angular .module(appTalk, []) .config([$routeProvider, function ($routeProvider) { $routeProvider .when(/sobre, { templateUrl: sobre.html, controller: SobreController }) .when(/home, { templateUrl: home.html, controller: HomeController }) .otherwise({redirectTo: /home}); }]);
  39. 39. window.appTalk = angular .module(appTalk, []) .config([$routeProvider, function ($routeProvider) { $routeProvider .when(/sobre, { templateUrl: sobre.html, controller: SobreController }) .when(/home, { templateUrl: home.html, controller: HomeController }) .otherwise({redirectTo: /home}); }]);
  40. 40. window.appTalk = angular .module(appTalk, []) .config([$routeProvider, function ($routeProvider) { $routeProvider .when(/sobre, { templateUrl: sobre.html, controller: SobreController }) .when(/home, { templateUrl: home.html, controller: HomeController }) .otherwise({redirectTo: /home}); }]);
  41. 41. e o DOM?
  42. 42. daqui pra frente,a mágica desaparece
  43. 43. diretiva
  44. 44. ServiçoAPP Controller diretivas <view> filters
  45. 45. ServiçoAPP Controller diretivas scope <view> filters
  46. 46. Serviço $injectorAPP Controller diretivas <view> filters
  47. 47. E - Elemento: <my-directive></my-directive>A - Atributo: <div my-directive="exp"> </div>C - Classe: <div class="my-directive: exp;"></div>M - Comentário: <!-- directive: my-directive exp -->
  48. 48. <DOM>
  49. 49. <DOM>COMPILE
  50. 50. <DOM>COMPILE LINK
  51. 51. <DOM>COMPILE LINK
  52. 52. window.appTalk.directive( directiveName, function factory(injectables) { var definicaoDeDiretiva = { priority: 0, template: <div></div>, templateUrl: directive.html, replace: false, transclude: false, restrict: A, scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink() { ... }, post: function postLink() { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; return definicaoDeDiretiva;});
  53. 53. leaky abstraction
  54. 54. Obrigado!mas espere... Henrique Netto
  55. 55. cursosdante@gmail.com Henrique Netto

×