Angular JS, você precisa conhecer
•
10 gefällt mir•4,961 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Angular JS, você precisa conhecer
Ähnlich wie Angular JS, você precisa conhecer (20)
Mehr von meet2Brains
Mehr von 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