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

AngularJS Services

Rodolfo Dias
July 06, 2016
Programming
1
400

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
73
Sweet Web Animations API
rmdias
1
520
Angular Evolution
rmdias
1
220
The Front End Power \o/
rmdias
1
180

Other Decks in Programming

See All in Programming
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.8k
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
110
CloudflareStack でRAGに入門
asahiiwm
0
130
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
220
Online-Dokumentation, die hilft: Strukturen, Prozesse, Tools
ahus1
0
100
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
7
1.5k
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
php-conference-japan-2024
tasuku43
0
370
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
760
testcontainers のススメ
sgash708
1
130
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
100

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Why Our Code Smells
bkeepers
PRO
335
57k
The Language of Interfaces
destraynor
155
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Optimizing for Happiness
mojombo
376
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Adaptive Systems
keathley
38
2.3k
Thoughts on Productivity
jonyablonski
68
4.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