Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
carregando...
levante a mão!
<angular-js ng-talk="meet2brains"/>
HTML              <html>   <form>         <title>                          <tr>           <ul><span>            <option>  ...
<html>               <video>                                                     <header>   <form>         <title>        ...
<ng-view>                   <ng-switch>                  <html>               <video>                                     ...
<body ng-app>                                platéia  <input ng-model="nome">  <p>Olá, {{nome}}!</p>         Olá, platéia!...
<body ng-app>  <input ng-model="nome">  <p>Olá, {{nome}}!</p>  <script href="angular.js"/></body>
<body ng-app>  <input ng-model="nome">  <p>Olá, {{nome}}!</p>  <script href="angular.js"/></body>
<body ng-app>  <input ng-model="nome">  <p>Olá, {{nome}}!</p>  <script href="angular.js"/></body>
mas... e   o   CONTROLLER?
function SorteadorController($scope) {    $scope.numero = 0;    $scope.sortearNumero = function () {       $scope.numero =...
<body ng-app>  <div ng-controller="SorteadorController">     <button ng-click="sortearNumero()">       fazer sorteio!     ...
<body ng-app>  <div ng-controller="SorteadorController">     <button ng-click="sortearNumero()">       fazer sorteio!     ...
<body ng-app>  <div ng-controller="SorteadorController">     <button ng-click="sortearNumero()">       fazer sorteio!     ...
<body ng-app>  <div ng-controller="SorteadorController">     <button ng-click="sortearNumero()">       fazer sorteio!     ...
MVC
MVC$scope.model = {   id: 1,   nome: Farfinhos,   idade: 18};
MVC<ul>  <li ng-repeat="usuario in usuarios">    {{usuario.id}} - {{usuario.nome}}  </li></ul>
MVCfunction Controller($scope) {    $scope.model = { ... };    $scope.handlerClick =         function () { ... };}
APP
APP   Controller
ServiçoAPP   Controller
ServiçoAPP   Controller       <view>
ServiçoAPP   Controller       <view>        filters
Como usar isso tudo para montar uma      aplicação single-page?
cria-se uma aplicação...
window.appTalk = angular.module(appTalk, []);
window.appTalk = angular.module(appTalk, []);  <div ng-app="appTalk">    ...  </div>
cria-se controllers...
window.appTalk   .controller(SobreController, [     $scope,     function ($scope){        ... código do controller ...    ...
cria-se serviços...
window.appTalk   .service(ServicoNecessario,     function (){       this.funcionalidade = function ()  {...};       ... có...
cria-se templates...
<div>  Detalhes sobre {{nome}}: <br>  {{info}}</div>
configura-se as rotas...
window.appTalk = angular   .module(appTalk, [])   .config([$routeProvider,     function ($routeProvider) {        $routePr...
window.appTalk = angular   .module(appTalk, [])   .config([$routeProvider,     function ($routeProvider) {        $routePr...
window.appTalk = angular   .module(appTalk, [])   .config([$routeProvider,     function ($routeProvider) {        $routePr...
window.appTalk = angular   .module(appTalk, [])   .config([$routeProvider,     function ($routeProvider) {        $routePr...
e o DOM?
daqui pra frente,a mágica desaparece
diretiva
ServiçoAPP               Controller      diretivas                   <view>                    filters
ServiçoAPP               Controller      diretivas      scope                   <view>                    filters
Serviço       $injectorAPP                Controller      diretivas                    <view>                     filters
E - Elemento:   <my-directive></my-directive>A - Atributo:   <div my-directive="exp"> </div>C - Classe:   <div class="my-d...
<DOM>
<DOM>COMPILE
<DOM>COMPILE LINK
<DOM>COMPILE LINK
window.appTalk.directive(    directiveName, function factory(injectables) { var definicaoDeDiretiva = {   priority: 0,    ...
leaky abstraction
Obrigado!mas espere...        Henrique Netto
cursosdante@gmail.com       Henrique Netto
Angular JS, você precisa conhecer
Nächste SlideShare
Wird geladen in …5
×

Angular JS, você precisa conhecer

4.854 Aufrufe

Veröffentlicht am

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.

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

    Obrigado!!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×