Introdução ao AngularJS
86 gostaram•9,598 visualizações
AngularJS é um framework JavaScript para desenvolvimento de aplicações web que estrutura a aplicação em camadas bem definidas como View, Controller e Scope. Ele fornece recursos como componentes reusáveis, integração com back-end e facilitação de testes automatizados.
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-55-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-56-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-57-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-58-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-59-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-60-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-61-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-62-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-63-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-64-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-65-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-66-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-67-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-68-320.jpg)
![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>](https://image.slidesharecdn.com/3-angularjs-constructingapplicationswithangularjs-introduction-140421185229-phpapp02/85/Introducao-ao-AngularJS-69-320.jpg)
Introdução ao AngularJS
- 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!
- 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?
- 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
- 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!
- 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>
- 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. </script> 8. </head> 9. <body> 10. </body> 11. </html>
- 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. </script> 8. </head> 9. <body> 10. </body> 11. </html>
- 60. 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>
- 61. 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>
Notas do Editor
- #4: Desmotivação
- #5: Desmotivação
- #6: Desmotivação
- #7: Desmotivação
- #8: Desmotivação
- #9: Desmotivação
- #10: Velocidade aumenta conforme os desperdícios vão sendo eliminados
- #11: Desmotivação
- #12: Desmotivação
- #13: Desmotivação
- #14: Desmotivação
- #15: Desmotivação
- #16: Desmotivação
- #17: Vontade de sair da empresa. Lembra do Belchior?
- #18: Desmotivação
- #19: Desmotivação
- #20: Desmotivação
- #21: Desmotivação
- #22: Vontade de sair da empresa. Lembra do Belchior?
- #23: Desmotivação
- #24: Desmotivação
- #25: Desmotivação
- #26: Desmotivação
- #27: Desmotivação
- #28: Desmotivação
- #29: Desmotivação
- #30: Desmotivação
- #31: Desmotivação
- #32: Desmotivação
- #34: Desmotivação
- #35: Desmotivação
- #36: Desmotivação
- #38: Desmotivação
- #39: Desmotivação
- #40: Desmotivação
- #41: Rain Skau
- #42: Desmotivação
- #43: Desmotivação
- #44: Desmotivação
- #45: Desmotivação
- #46: Desmotivação
- #47: Desmotivação
- #48: Desmotivação
- #49: Desmotivação
- #50: Desmotivação
- #71: Desmotivação