TDC2016SP - Trilha Frameworks JavaScript
•
0 likes•205 views
AngularJS Services - Boas praticas e reutilização de código
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
More from tdc-globalcode
More from tdc-globalcode (20)
Recently uploaded
Recently uploaded (9)
TDC2016SP - Trilha Frameworks JavaScript
- 1. angularjs services boas práticas e reuso de código
- 2. @r_mdias Rodolfo Dias JavaScript Developer at Inatel Competence Center
- 3. Recife
- 4. Recife
- 5. Recife
- 6. Recife
- 7. SRS
- 9. angularjs services boas práticas e reuso de código
- 11. Definição Serviço, do Latim Servitĭum Substantivo utilizado para designar tarefa, trabalho ou obra em execução, a ser executado ou já realizado.
- 13. Serviços em aplicações - Por que usar? - Modularização - Organização - Reutilização de lógica na aplicação
- 14. angularjs services/ Serviços no Angular
- 16. angularjs services/ Serviços no Angular - Cenário
- 17. <!—-index.html—-> <!DOCTYPE html> <html lang="en" ng-app="heroesApp"> <head> <meta charset="UTF-8"> <title>AngularJS Hero Services</title> </head> <body> <div ng-controller="heroesController"></div> <script src="angular.min.js"></script> <script src="app.js"></script> <script src="heroesController.js"></script> <script src="components/heroes-provider.js"></script> <script src="components/heroes-service.js"></script> <script src="components/heroes-factory.js"></script> <script src="components/heroes-constant.js"></script> <script src="components/heroes-value.js"></script> </body> </html>
- 18. Serviços no Angular - Cenário github.com/rmdias/AngularJS-Services
- 19. angularjs services/ Serviços no Angular - $provider
- 20. Serviços no Angular - $provider //components/heroes-provider.js 'use strict'; angular .module('heroesApp.heroesProvider', []) .provider('heroesProvider', heroesProvider); function heroesProvider(){ this.heroes = ['Superman', 'Flash', 'Spider Man']; this.updateHeroes = function(newHeroes){ this.heroes = newHeroes; } this.$get = function() { return this.heroes; }; }
- 21. Serviços no Angular - $provider //components/heroes-provider.js 'use strict'; angular .module('heroesApp.heroesProvider', []) .provider('heroesProvider', heroesProvider); function heroesProvider(){ this.heroes = ['Superman', 'Flash', 'Spider Man']; this.updateHeroes = function(newHeroes){ this.heroes = newHeroes; } this.$get = function() { return this.heroes; }; }
- 22. //components/heroes-provider.js 'use strict'; angular .module('heroesApp.heroesProvider', []) .provider('heroesProvider', heroesProvider); function heroesProvider(){ this.heroes = ['Superman', 'Flash', 'Spider Man']; this.updateHeroes = function(newHeroes){ this.heroes = newHeroes; } this.$get = function() { return this.heroes; }; } Serviços no Angular - $provider
- 23. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Super man', 'Flash', 'Spider Man'] Serviços no Angular - $provider
- 24. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Super man', 'Flash', 'Spider Man'] Serviços no Angular - $provider
- 25. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Super man', 'Flash', 'Spider Man'] Serviços no Angular - $provider
- 26. //components/heroes-provider.js 'use strict'; angular .module('heroesApp.heroesProvider', []) .provider('heroesProvider', heroesProvider); function heroesProvider(){ this.heroes = ['Superman', 'Flash', 'Spider Man']; this.updateHeroes = function(newHeroes){ this.heroes = newHeroes; } this.$get = function() { return this.heroes; }; } Serviços no Angular - $provider
- 27. //components/heroes-provider.js 'use strict'; angular .module('heroesApp.heroesProvider', []) .provider('heroesProvider', heroesProvider); function heroesProvider(){ this.heroes = ['Superman', 'Flash', 'Spider Man']; this.updateHeroes = function(newHeroes){ this.heroes = newHeroes; } this.$get = function() { return this.heroes; }; } Serviços no Angular - $provider
- 28. //app.js 'use strict'; angular .module('heroesApp', [ 'heroesApp.heroesProvider', 'heroesApp.heroesService', 'heroesApp.heroesFactory', 'heroesApp.heroesConstant', 'heroesApp.heroesValue', 'heroesApp.heroesController' ]) .config(function(heroesProviderProvider){ var newHeroes = ['Wesley Safadão', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); }); Serviços no Angular - $provider
- 29. //app.js 'use strict'; angular .module('heroesApp', [ 'heroesApp.heroesProvider', 'heroesApp.heroesService', 'heroesApp.heroesFactory', 'heroesApp.heroesConstant', 'heroesApp.heroesValue', 'heroesApp.heroesController' ]) .config(function(heroesProviderProvider){ var newHeroes = ['Wesley Safadão', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); }); Serviços no Angular - $provider
- 30. //app.js 'use strict'; angular .module('heroesApp', [ 'heroesApp.heroesProvider', 'heroesApp.heroesService', 'heroesApp.heroesFactory', 'heroesApp.heroesConstant', 'heroesApp.heroesValue', 'heroesApp.heroesController' ]) .config(function(heroesProviderProvider){ var newHeroes = ['Wesley Safadão', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); }); Serviços no Angular - $provider
- 31. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // Vai Safadão, Vai Safadão! Serviços no Angular - $provider
- 32. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Wesley Safadão', 'Batman', 'Captain America'] Serviços no Angular - $provider
- 33. angularjs services/ Serviços no Angular - $service
- 34. Serviços no Angular - $service //components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService); function heroesService(){ this.heroes = ['Wesley Safadão', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower o/ }; };
- 35. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]} Serviços no Angular - $service
- 36. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]} Serviços no Angular - $service
- 37. Serviços no Angular - $service //components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService); function heroesService(){ this.heroes = ['Wesley Safadão', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower o/ }; };
- 38. Serviços no Angular - $service //components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService); function heroesService(){ this.heroes = ['Wesley Safadão', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower o/ }; };
- 39. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3], getHeroPower: function(hero)} Serviços no Angular - $service
- 40. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3], getHeroPower: function(hero)} Serviços no Angular - $service
- 41. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesService'] function heroesController(heroesService){ heroesService.getHeroPower('Wesley Safadão'); }; // heroesService {heroes: Array[3], getHeroPower: function(hero)} Serviços no Angular - $service
- 42. angularjs services/ Serviços no Angular - $factory
- 43. Serviços no Angular - $factory //components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory); function heroesFactory(){ var heroes = ['Wesley Safadão', 'Batman', 'Captain America']; return { heroes : heroes getHeroPower : getHeroPower }; function getHeroPower(hero){ // getHeroPower o/ }; };
- 44. Serviços no Angular - $factory //components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory); function heroesFactory(){ var heroes = ['Wesley Safadão', 'Batman', 'Captain America']; return { heroes : heroes getHeroPower : getHeroPower }; function getHeroPower(hero){ // getHeroPower o/ }; };
- 45. Serviços no Angular - $factory //components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory); function heroesFactory(){ var heroes = ['Wesley Safadão', 'Batman', 'Captain America']; return { heroes : heroes getHeroPower : getHeroPower }; function getHeroPower(hero){ // getHeroPower o/ }; };
- 46. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]} Serviços no Angular - $factory
- 47. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]} Serviços no Angular - $factory // h 'use strict'; angular .module('heroesApp.heroesControll .controller('heroesController', h heroesController.$inject = ['hero function heroesController(heroesS console.log(heroesService) }; // heroesService {heroes: Array[3
- 48. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]} Serviços no Angular - $factory
- 49. Serviços no Angular - $factory //components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory); function heroesFactory(){ var heroes = ['Wesley Safadão', 'Batman', 'Captain America']; return { heroes : heroes getHeroPower : getHeroPower }; function getHeroPower(hero){ // getHeroPower o/ }; };
- 50. Serviços no Angular - $factory //components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory); function heroesFactory(){ var heroes = ['Wesley Safadão', 'Batman', 'Captain America']; return { heroes : heroes getHeroPower : getHeroPower }; function getHeroPower(hero){ // getHeroPower o/ }; };
- 51. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3], getHeroPower: getHeroPower(hero)} Serviços no Angular - $factory
- 52. // heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController); heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ heroesFactory.getHeroPower('Wesley Safadão'); }; // Object {heroes: Array[3], getHeroPower: getHeroPower(hero)} Serviços no Angular - $factory
- 53. angularjs services/ Serviços no Angular - $constant
- 54. Serviços no Angular - $constant //components/heroes-constant.js 'use strict'; angular .module('heroesApp.heroesConstant', []) .constant('heroesConstant', 'HERO!');
- 55. angularjs services/ Serviços no Angular - $value
- 56. Serviços no Angular - $value //components/heroes-value.js 'use strict'; angular .module('heroesApp.heroesValue', []) .value('heroesValue', 'HERO!');
- 57. angularjs services/ Serviços no Angular
- 58. angularjs services: boas práticas e reuso de código / obrigado