Transferir como PDF, PPTX
![window.appTalk = angular.module('appTalk', []);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-29-320.jpg)
![window.appTalk = angular.module('appTalk', []);
<div ng-app="appTalk">
...
</div>](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-30-320.jpg)
![window.appTalk
.controller('SobreController', [
'$scope',
function ($scope){
... código do controller ...
}
]);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-32-320.jpg)
![window.appTalk = angular
.module('appTalk', [])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/sobre', {
templateUrl: 'sobre.html',
controller: 'SobreController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/home});
}]);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-38-320.jpg)
![window.appTalk = angular
.module('appTalk', [])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/sobre', {
templateUrl: 'sobre.html',
controller: 'SobreController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/home});
}]);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-39-320.jpg)
![window.appTalk = angular
.module('appTalk', [])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/sobre', {
templateUrl: 'sobre.html',
controller: 'SobreController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/home});
}]);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-40-320.jpg)
![window.appTalk = angular
.module('appTalk', [])
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/sobre', {
templateUrl: 'sobre.html',
controller: 'SobreController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/home});
}]);](https://image.slidesharecdn.com/angularjs-130327110737-phpapp02/85/Angular-JS-voce-precisa-conhecer-41-320.jpg)
Carregado pormeet2Brains
Angular JS, você precisa conhecer
O documento resume os principais conceitos do framework AngularJS, incluindo: 1) Como criar aplicações single-page usando controllers, serviços, templates e rotas; 2) O que são diretivas e como elas permitem estender a funcionalidade do Angular; 3) Como o ciclo de compilação e ligação do Angular funciona para integrar diretivas ao DOM.
Mais conteúdo relacionado
Semelhante a Angular JS, você precisa conhecer
Angular JS, você precisa conhecer
- 1.
- 2.
- 3.
- 5. HTML <html> <form> <title> <tr> <ul> <span> <option> <td> <input> <a> <br> <em> <table> <script> <strong> <legend> <div> <select> <button> <textarea>
- 6. <html> <video> <header> <form> <title> <tr> <canvas> <ul> <span> <option> <td> <audio> <input> <a> <br> <em> <section> <script> <table> <meter> <strong> <legend> <div> <menu> <select> <button> <hgroup> <textarea> <progress>
- 7. <ng-view> <ng-switch> <html> <video> <header> <form> <title> <tr> <canvas> <ul> <span> <option> <td> <audio> <input> <a> <br> <em> <section> <script> <table> <meter> <strong> <legend> <div> <menu> <select> <button> <hgroup> <textarea> <progress> <minha-tag> ng-model=""
- 8. <body ng-app> platéia <input ng-model="nome"> <p>Olá, {{nome}}!</p> Olá, platéia! <script href="angular.js"/> </body>
- 9. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 10. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 11. <body ng-app> <input ng-model="nome"> <p>Olá, {{nome}}!</p> <script href="angular.js"/> </body>
- 12. mas... e o CONTROLLER?
- 13. function SorteadorController($scope) { $scope.numero = 0; $scope.sortearNumero = function () { $scope.numero = Math.floor(Math.random() * 100); }; } sorteador-controller.js
- 14. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/> </body>
- 15. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/> </body>
- 16. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/> </body>
- 17. <body ng-app> <div ng-controller="SorteadorController"> <button ng-click="sortearNumero()"> fazer sorteio! </button> <p>O número sorteado foi: {{numero}}</p> </div> <script href="angular.js"/> <script href="sorteador-controller.js"/> </body>
- 18.
- 19. MVC $scope.model = { id: 1, nome: 'Farfinhos', idade: 18 };
- 20. MVC <ul> <ling-repeat="usuario in usuarios"> {{usuario.id}} - {{usuario.nome}} </li> </ul>
- 21. MVC function Controller($scope) { $scope.model = { ... }; $scope.handlerClick = function () { ... }; }
- 22.
- 23. APP Controller
- 24. Serviço APP Controller
- 25. Serviço APP Controller <view>
- 26. Serviço APP Controller <view> filters
- 27. Como usar issotudo para montar uma aplicação single-page?
- 28.
- 29.
- 30. window.appTalk = angular.module('appTalk',[]); <div ng-app="appTalk"> ... </div>
- 31.
- 32. window.appTalk .controller('SobreController', [ '$scope', function ($scope){ ... código do controller ... } ]);
- 33.
- 34. window.appTalk .service('ServicoNecessario', function (){ this.funcionalidade = function () {...}; ... código do serviço ... });
- 35.
- 36. <div> Detalhessobre {{nome}}: <br> {{info}} </div>
- 37.
- 38. window.appTalk = angular .module('appTalk', []) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/sobre', { templateUrl: 'sobre.html', controller: 'SobreController' }) .when('/home', { templateUrl: 'home.html', controller: 'HomeController' }) .otherwise({redirectTo: '/home}); }]);
- 39. window.appTalk = angular .module('appTalk', []) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/sobre', { templateUrl: 'sobre.html', controller: 'SobreController' }) .when('/home', { templateUrl: 'home.html', controller: 'HomeController' }) .otherwise({redirectTo: '/home}); }]);
- 40. window.appTalk = angular .module('appTalk', []) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/sobre', { templateUrl: 'sobre.html', controller: 'SobreController' }) .when('/home', { templateUrl: 'home.html', controller: 'HomeController' }) .otherwise({redirectTo: '/home}); }]);
- 41. window.appTalk = angular .module('appTalk', []) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/sobre', { templateUrl: 'sobre.html', controller: 'SobreController' }) .when('/home', { templateUrl: 'home.html', controller: 'HomeController' }) .otherwise({redirectTo: '/home}); }]);
- 42.
- 43. daqui pra frente, amágica desaparece
- 44.
- 45. Serviço APP Controller diretivas <view> filters
- 46. Serviço APP Controller diretivas scope <view> filters
- 47. Serviço $injector APP Controller diretivas <view> filters
- 48. E - Elemento: <my-directive></my-directive> A - Atributo: <div my-directive="exp"> </div> C - Classe: <div class="my-directive: exp;"></div> M - Comentário: <!-- directive: my-directive exp -->
- 49.
- 50.
- 51.
- 52.
- 53. window.appTalk.directive( 'directiveName', function factory(injectables) { var definicaoDeDiretiva = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink() { ... }, post: function postLink() { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; return definicaoDeDiretiva; });
- 54.
- 55. Obrigado! mas espere... Henrique Netto
- 56. cursosdante @gmail.com Henrique Netto