Introdução ao AngularJS

6,202 views

Published on

Introdução ao AngularJS

Published in: Technology
2 Comments
53 Likes
Statistics
Notes
No Downloads
Views
Total views
6,202
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
0
Comments
2
Likes
53
Embeds 0
No embeds

No notes for slide
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Velocidade aumenta conforme os desperdícios vão sendo eliminados
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Vontade de sair da empresa. Lembra do Belchior?
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Rain Skau
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • Desmotivação
  • 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>

    ×