Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS Services

Rodolfo Dias
July 06, 2016
Programming
1
380

AngularJS Services

Talk presented in The Developers Conference 2016, about AngularJS Services to version 1.X

The scripts to support this presentation are available in - https://github.com/rmdias/AngularJS-Services

Rodolfo Dias

July 06, 2016
Tweet

More Decks by Rodolfo Dias

See All by Rodolfo Dias
How Cinema and Coding are Alike
rmdias
2
66
Sweet Web Animations API
rmdias
1
500
Angular Evolution
rmdias
1
200
The Front End Power \o/
rmdias
1
160

Other Decks in Programming

See All in Programming
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
140
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Fragment Composition of GraphQL
quramy
13
1.5k
Elm Form Validation
bkuhlmann
0
520
Direct Style Effect Systems The Print[A] Example A Comprehension Aid
philipschwarz
PRO
0
170
Domain-Driven Transformation
hschwentner
2
1.5k
CREってこういうこと？ 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
560
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
990

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Ruby is Unlike a Banana
tanoku
96
10k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Into the Great Unknown - MozCon
thekraken
15
1k
Faster Mobile Websites
deanohume
300
30k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Testing 201, or: Great Expectations
jmmastey
30
6.4k

Transcript

  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

  8. None

  9. angularjs services boas práticas e reuso de código

  10. angularjs services/ Serviço-Definição

  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.

  12. Serviços em aplicações

  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

  15. Serviços no Angular $Provider $Service $Factory $Constant e $Value

  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