Your SlideShare is downloading. ×
0
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular JS, você precisa conhecer

2,747

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, …

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
1 Comment
5 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
2,747
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
74
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. carregando...
  • 2. levante a mão!
  • 3. <angular-js ng-talk="meet2brains"/>
  • 4. HTML <html> <form> <title> <tr> <ul><span> <option> <td> <input> <a> <br> <em> <table><script> <strong> <legend> <div> <select> <button> <textarea>
  • 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. <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. <body ng-app> platéia <input ng-model="nome"> <p>Olá, {{nome}}!</p> Olá, platéia! <script href="angular.js"/></body>
  • 8. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <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. mas... e o CONTROLLER?
  • 12. function SorteadorController($scope) { $scope.numero = 0; $scope.sortearNumero = function () { $scope.numero = Math.floor(Math.random() * 100); };} sorteador-controller.js
  • 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. <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. MVC
  • 18. MVC$scope.model = { id: 1, nome: Farfinhos, idade: 18};
  • 19. MVC<ul> <li ng-repeat="usuario in usuarios"> {{usuario.id}} - {{usuario.nome}} </li></ul>
  • 20. MVCfunction Controller($scope) { $scope.model = { ... }; $scope.handlerClick = function () { ... };}
  • 21. APP
  • 22. APP Controller
  • 23. ServiçoAPP Controller
  • 24. ServiçoAPP Controller <view>
  • 25. ServiçoAPP Controller <view> filters
  • 26. Como usar isso tudo para montar uma aplicação single-page?
  • 27. cria-se uma aplicação...
  • 28. window.appTalk = angular.module(appTalk, []);
  • 29. window.appTalk = angular.module(appTalk, []); <div ng-app="appTalk"> ... </div>
  • 30. cria-se controllers...
  • 31. window.appTalk .controller(SobreController, [ $scope, function ($scope){ ... código do controller ... } ]);
  • 32. cria-se serviços...
  • 33. window.appTalk .service(ServicoNecessario, function (){ this.funcionalidade = function () {...}; ... código do serviço ... });
  • 34. cria-se templates...
  • 35. <div> Detalhes sobre {{nome}}: <br> {{info}}</div>
  • 36. configura-se as rotas...
  • 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. 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. e o DOM?
  • 42. daqui pra frente,a mágica desaparece
  • 43. diretiva
  • 44. ServiçoAPP Controller diretivas <view> filters
  • 45. ServiçoAPP Controller diretivas scope <view> filters
  • 46. Serviço $injectorAPP Controller diretivas <view> filters
  • 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. <DOM>
  • 49. <DOM>COMPILE
  • 50. <DOM>COMPILE LINK
  • 51. <DOM>COMPILE LINK
  • 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. leaky abstraction
  • 54. Obrigado!mas espere... Henrique Netto
  • 55. cursosdante@gmail.com Henrique Netto

×