AngularJS Services

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

@r_mdias Rodolfo Dias JavaScript Developer at Inatel Competence Center

Recife

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

angularjs services/ Serviço-Definição

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.

Serviços em aplicações

Serviços em aplicações - Por que usar? - Modularização -
Organização - Reutilização de lógica na aplicação

angularjs services/ Serviços no Angular

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

angularjs services/ Serviços no Angular - Cenário

<!—-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>

Serviços no Angular - Cenário github.com/rmdias/AngularJS-Services

angularjs services/ Serviços no Angular - $provider

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; }; }

//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

// 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

//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

//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

= ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // Vai Safadão, Vai Safadão! Serviços no Angular - $provider

= ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Wesley Safadão', 'Batman', 'Captain America'] Serviços no Angular - $provider

angularjs services/ Serviços no Angular - $service

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/ }; };

= ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]} Serviços no Angular - $service

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/ }; };

= ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3], getHeroPower: function(hero)} Serviços no Angular - $service

= ['heroesService'] function heroesController(heroesService){ heroesService.getHeroPower('Wesley Safadão'); }; // heroesService {heroes: Array[3], getHeroPower: function(hero)} Serviços no Angular - $service

angularjs services/ Serviços no Angular - $factory

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/ }; };

= ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]} Serviços no Angular - $factory

= ['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

= ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]} Serviços no Angular - $factory

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/ }; };

= ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3], getHeroPower: getHeroPower(hero)} Serviços no Angular - $factory

= ['heroesFactory'] function heroesController(heroesFactory){ heroesFactory.getHeroPower('Wesley Safadão'); }; // Object {heroes: Array[3], getHeroPower: getHeroPower(hero)} Serviços no Angular - $factory

angularjs services/ Serviços no Angular - $constant

Serviços no Angular - $constant //components/heroes-constant.js 'use strict'; angular .module('heroesApp.heroesConstant',
[]) .constant('heroesConstant', 'HERO!');

angularjs services/ Serviços no Angular - $value

Serviços no Angular - $value //components/heroes-value.js 'use strict'; angular .module('heroesApp.heroesValue',
[]) .value('heroesValue', 'HERO!');

angularjs services/ Serviços no Angular

angularjs services: boas práticas e reuso de código / obrigado

AngularJS Services

AngularJS Services

More Decks by Rodolfo Dias

Other Decks in Programming

Featured

Transcript