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,994 views

Published on

Introdução ao AngularJS

Published in: Technology
  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If we are speaking about saving time and money this site ⇒ www.HelpWriting.net ⇐ is going to be the best option!! I personally used lots of times and remain highly satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Prezado Rodrigo teria como você disponibilizar estes slides para download?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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>

×