Introdução ao AngularJS em

1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Introdução ao AngularJS

3. AngularJS é um framework para o desenvolvimento de aplicações web utilizando a linguagem JavaScript!

4. Estrutura a arquitetura da aplicação em camadas bem definidas

5. Permite a criação componentes reusáveis e modulares

6. Fornece a infraestrutura necessária para integrar com o back-end

7. Facilita a automação de testes

8. Miško Hevery e Adams Abrons criaram o projeto em 2009

9. Facilitar a criação de aplicações web!

10. Já pensou quanto código precisamos escrever para criar uma aplicação simples?

12. 17.000 linhas e 6 meses depois...

13. Aposto que consigo reescrever o projeto todo em apenas 2 semanas...

14. Eles conseguiram reescrever tudo em apenas 1.500 linhas, 3 semanas depois

15. Atualmente, o projeto AngularJS é mantido pelo Google!

16. O interesse pelo framework vem crescendo cada vez mais!

17. 1.0.0 temporal-domination (2012-06-13)

18. 1.2.0 timely-delivery (2013-11-08)

19. 1.3.0 superluminal-nudge (2014-10-13)

20. 1.4.0-beta.6 cookie-liberation (2015-03-17)

21. Quem está usando AngularJS?

27. Por que eu deveria utilizar AngularJS ?

28. Produtividade

29. Continuidade

30. Comunidade

31. Totalmente escrito em JavaScript

32. Isso quer dizer que toda a aplicação roda browser do cliente?

33. Vai funcionar em todos os browsers?

34. Como fica a performance?

35. E a segurança do código?

37. Arquitetura do framework

38. O que é arquitetura? Qual é a diferença entre arquitetura e design?

39. Surgimento do padrão MVC Model-View-Controller

40. Trygve Reenskaug Criou o padrão em 1978 na Xerox (PARC)

42. MVC, MVP, MVVM e MVW

43. Separação de responsabilidades

45. View É o que o cliente vê

46. Controller Responsável pelo que a View consome

47. Scope Faz a mediação entre a View e o Controller

48. Hello World!

49. http://www.angularjs.org

50. 1. <html> 2. <head> 3. <title>Hello World</title> 4. </head> 5. <body> 6. </body> 7. </html>

51. 1. <html> 2. <head> 3. <title>Hello World</title> 4. <script src='angular.js'></script> 5. </head> 6. <body> 7. </body> 8. </html>

52. 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>

53. 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>

54. 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>

55. 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>

56. 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>

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. </script> 8. </head> 9. <body> 10. </body> 11. </html>

62. 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>

63. 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>

64. 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>

65. 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>

66. 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>

67. 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>

68. 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>

69. 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>

Introdução ao AngularJS em

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução ao AngularJS em

Semelhante a Introdução ao AngularJS em (20)

Mais de Rodrigo Branas

Mais de Rodrigo Branas (19)

Introdução ao AngularJS em

Notas do Editor