Angular JS, você precisa conhecer
•
10 gostaram•4,961 visualizações
O documento resume os principais conceitos do framework AngularJS, incluindo: 1) Como criar aplicações single-page usando controllers, serviços, templates e rotas; 2) O que são diretivas e como elas permitem estender a funcionalidade do Angular; 3) Como o ciclo de compilação e ligação do Angular funciona para integrar diretivas ao DOM.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Angular JS, você precisa conhecer
Semelhante a Angular JS, você precisa conhecer (20)
Mais de meet2Brains
Mais de meet2Brains (20)
Angular JS, você precisa conhecer
- 5. HTML <html> <form> <title> <tr> <ul> <span> <option> <td> <input> <a> <br> <em> <table> <script> <strong> <legend> <div> <select> <button> <textarea>
- 6. <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>
- 7. <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=""
- 8. <body ng-app> platéia <input ng-model="nome"> <p>Olá, {{nome}}!</p> Olá, platéia! <script href="angular.js"/> </body>
- 9. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 10. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 11. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 12. mas... e o CONTROLLER?
- 13. function SorteadorController($scope) { $scope.numero = 0; $scope.sortearNumero = function () { $scope.numero = Math.floor(Math.random() * 100); }; } sorteador-controller.js
- 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. <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. <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. <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>
- 18. MVC
- 19. MVC $scope.model = { id: 1, nome: 'Farfinhos', idade: 18 };
- 20. MVC <ul> <li ng-repeat="usuario in usuarios"> {{usuario.id}} - {{usuario.nome}} </li> </ul>
- 21. MVC function Controller($scope) { $scope.model = { ... }; $scope.handlerClick = function () { ... }; }
- 22. APP
- 23. APP Controller
- 24. Serviço APP Controller
- 25. Serviço APP Controller <view>
- 26. Serviço APP Controller <view> filters
- 27. Como usar isso tudo para montar uma aplicação single-page?
- 30. window.appTalk = angular.module('appTalk', []); <div ng-app="appTalk"> ... </div>
- 32. window.appTalk .controller('SobreController', [ '$scope', function ($scope){ ... código do controller ... } ]);
- 34. window.appTalk .service('ServicoNecessario', function (){ this.funcionalidade = function () {...}; ... código do serviço ... });
- 36. <div> Detalhes sobre {{nome}}: <br> {{info}} </div>
- 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. 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. 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. 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}); }]);
- 42. e o DOM?
- 43. daqui pra frente, a mágica desaparece
- 44. diretiva
- 45. Serviço APP Controller diretivas <view> filters
- 46. Serviço APP Controller diretivas scope <view> filters
- 47. Serviço $injector APP Controller diretivas <view> filters
- 48. 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 -->
- 49. <DOM>
- 50. <DOM> COMPILE
- 53. 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; });
- 55. Obrigado! mas espere... Henrique Netto
- 56. cursosdante @gmail.com Henrique Netto