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
Próxima SlideShare
Cargando en…5
×

Angular JS, você precisa conhecer

4.816 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Olá, se me permite gostaria de comentar sobre meu novo livro 'AngularJS na prática' https://leanpub.com/livro-angularJS

    Obrigado!!
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×