O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introdução ao AngularJS

8.666 visualizações

Publicada em

Introdução ao AngularJS

Publicada em: Tecnologia

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>

×