Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introdução ao AngularJS

8,634 views

Published on

Introdução ao AngularJS

Published in: Technology

Introdução ao AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Introdução ao AngularJS
  2. 2. AngularJS é um framework para o desenvolvimento de aplicações web utilizando a linguagem JavaScript!
  3. 3. Estrutura a arquitetura da aplicação em camadas bem definidas
  4. 4. Permite a criação componentes reusáveis e modulares
  5. 5. Fornece a infraestrutura necessária para integrar com o back-end
  6. 6. Facilita a automação de testes
  7. 7. Miško Hevery e Adams Abrons criaram o projeto em 2009
  8. 8. Facilitar a criação de aplicações web!
  9. 9. Já pensou quanto código precisamos escrever para criar uma aplicação simples?
  10. 10. 17.000 linhas e 6 meses depois...
  11. 11. Aposto que consigo reescrever o projeto todo em apenas 2 semanas...
  12. 12. Eles conseguiram reescrever tudo em apenas 1.500 linhas, 3 semanas depois
  13. 13. Atualmente, o projeto AngularJS é mantido pelo Google!
  14. 14. O interesse pelo framework vem crescendo cada vez mais!
  15. 15. 1.0.0 temporal-domination (2012-06-13)
  16. 16. 1.2.0 timely-delivery (2013-11-08)
  17. 17. 1.3.0 superluminal-nudge (2014-10-13)
  18. 18. 1.4.0-beta.6 cookie-liberation (2015-03-17)
  19. 19. Quem está usando AngularJS?
  20. 20. Por que eu deveria utilizar AngularJS ?
  21. 21. Produtividade
  22. 22. Continuidade
  23. 23. Comunidade
  24. 24. Totalmente escrito em JavaScript
  25. 25. Isso quer dizer que toda a aplicação roda browser do cliente?
  26. 26. Vai funcionar em todos os browsers?
  27. 27. Como fica a performance?
  28. 28. E a segurança do código?
  29. 29. Arquitetura do framework
  30. 30. O que é arquitetura? Qual é a diferença entre arquitetura e design?
  31. 31. Surgimento do padrão MVC Model-View-Controller
  32. 32. Trygve Reenskaug Criou o padrão em 1978 na Xerox (PARC)
  33. 33. MVC, MVP, MVVM e MVW
  34. 34. Separação de responsabilidades
  35. 35. View É o que o cliente vê
  36. 36. Controller Responsável pelo que a View consome
  37. 37. Scope Faz a mediação entre a View e o Controller
  38. 38. Hello World!
  39. 39. http://www.angularjs.org
  40. 40. 1. <html> 2. <head> 3. <title>Hello World</title> 4. </head> 5. <body> 6. </body> 7. </html>
  41. 41. 1. <html> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. </head> 6. <body> 7. </body> 8. </html>
  42. 42. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. </head> 6. <body> 7. </body> 8. </html>
  43. 43. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. </script> 7. </head> 8. <body> 9. </body> 10. </html>
  44. 44. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. </script> 7. </head> 8. <body> 9. </body> 10. </html>
  45. 45. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  46. 46. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  47. 47. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  48. 48. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  49. 49. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  50. 50. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  51. 51. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. </script> 8. </head> 9. <body> 10. </body> 11. </html>
  52. 52. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. }); 9. </script> 10. </head> 11. <body> 12. </body> 13. </html>
  53. 53. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. }); 9. </script> 10. </head> 11. <body> 12. </body> 13. </html>
  54. 54. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body> 13. </body> 14. </html>
  55. 55. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body> 13. </body> 14. </html>
  56. 56. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body ng-controller="helloWorldCtrl"> 13. </body> 14. </html>
  57. 57. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body ng-controller="helloWorldCtrl"> 13. </body> 14. </html>
  58. 58. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body ng-controller="helloWorldCtrl"> 13. {{message}} 14. </body> 15. </html>
  59. 59. 1. <html ng-app="helloWorld"> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. <script> 6. var app = angular.module("helloWorld", []); 7. app.controller("helloWorldCtrl", function($scope) { 8. $scope.message = "Hello World!"; 9. }); 10. </script> 11. </head> 12. <body ng-controller="helloWorldCtrl"> 13. {{message}} 14. </body> 15. </html>

×