If you can't read please download the document
Upload
tdc-globalcode
View
62
Download
0
Embed Size (px)
Citation preview
angularjs servicesboas prticas e reuso de cdigo
@r_mdias
Rodolfo Dias JavaScript Developer at Inatel Competence Center
Recife
Recife
Recife
Recife
SRS
angularjs servicesboas prticas e reuso de cdigo
angularjs services/
Servio-Definio
Definio
Servio, do Latim Servitum
Substantivo utilizado para designar tarefa, trabalho ou obra em execuo, a ser executado ou j realizado.
Servios em aplicaes
Servios em aplicaes - Por que usar?
- Modularizao
- Organizao
- Reutilizao de lgica na aplicao
angularjs services/
Servios no Angular
Servios no Angular
$Provider
$Service
$Factory
$Constant e $Value
angularjs services/
Servios no Angular - Cenrio
AngularJS Hero Services
Servios no Angular - Cenrio
github.com/rmdias/AngularJS-Services
angularjs services/
Servios no Angular - $provider
Servios 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; }; }
Servios 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; }; }
Servios 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']
Servios 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']
Servios 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']
Servios 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; }; }
Servios 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; }; }
Servios 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 Safado', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); });
Servios 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 Safado', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); });
Servios 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 Safado', 'Batman', 'Captain America']; heroesProviderProvider.updateHeroes(newHeroes); });
Servios no Angular - $provider
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // Vai Safado, Vai Safado!
Servios no Angular - $provider
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesProvider'] function heroesController(heroesProvider){ console.log(heroesProvider) }; // ['Wesley Safado', 'Batman', 'Captain America']
Servios no Angular - $provider
angularjs services/
Servios no Angular - $service
Servios no Angular - $service
//components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService);
function heroesService(){ this.heroes = ['Wesley Safado', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower \o/ }; };
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]}
Servios no Angular - $service
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]}
Servios no Angular - $service
Servios no Angular - $service
//components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService);
function heroesService(){ this.heroes = ['Wesley Safado', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower \o/ }; };
Servios no Angular - $service
//components/heroes-service.js 'use strict'; angular .module('heroesApp.heroesService', []) .service('heroesService', heroesService);
function heroesService(){ this.heroes = ['Wesley Safado', 'Batman', 'Captain America']; this.getHeroPower = function(hero) { // getHeroPower \o/ }; };
// 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)}
Servios no Angular - $service
// 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)}
Servios no Angular - $service
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesService'] function heroesController(heroesService){ heroesService.getHeroPower('Wesley Safado'); }; // heroesService {heroes: Array[3], getHeroPower: function(hero)}
Servios no Angular - $service
angularjs services/
Servios no Angular - $factory
Servios no Angular - $factory
//components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory);
function heroesFactory(){ var heroes = ['Wesley Safado', 'Batman', 'Captain America'];
return { heroes : heroes getHeroPower : getHeroPower };
function getHeroPower(hero){ // getHeroPower \o/ }; };
Servios no Angular - $factory
//components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory);
function heroesFactory(){ var heroes = ['Wesley Safado', 'Batman', 'Captain America'];
return { heroes : heroes getHeroPower : getHeroPower };
function getHeroPower(hero){ // getHeroPower \o/ }; };
Servios no Angular - $factory
//components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory);
function heroesFactory(){ var heroes = ['Wesley Safado', 'Batman', 'Captain America'];
return { heroes : heroes getHeroPower : getHeroPower };
function getHeroPower(hero){ // getHeroPower \o/ }; };
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]}
Servios no Angular - $factory
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]}
Servios no Angular - $factory
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesService'] function heroesController(heroesService){ console.log(heroesService) }; // heroesService {heroes: Array[3]}
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ console.log(heroesFactory) }; // Object {heroes: Array[3]}
Servios no Angular - $factory
Servios no Angular - $factory
//components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory);
function heroesFactory(){ var heroes = ['Wesley Safado', 'Batman', 'Captain America'];
return { heroes : heroes getHeroPower : getHeroPower };
function getHeroPower(hero){ // getHeroPower \o/ }; };
Servios no Angular - $factory
//components/heroes-factory.js angular .module('heroesApp.heroesFactory', []) .factory('heroesFactory', heroesFactory);
function heroesFactory(){ var heroes = ['Wesley Safado', 'Batman', 'Captain America'];
return { heroes : heroes getHeroPower : getHeroPower };
function getHeroPower(hero){ // getHeroPower \o/ }; };
// 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)}
Servios no Angular - $factory
// heroesController.js 'use strict'; angular .module('heroesApp.heroesController', []) .controller('heroesController', heroesController);
heroesController.$inject = ['heroesFactory'] function heroesController(heroesFactory){ heroesFactory.getHeroPower('Wesley Safado'); }; // Object {heroes: Array[3], getHeroPower: getHeroPower(hero)}
Servios no Angular - $factory
angularjs services/
Servios no Angular - $constant
Servios no Angular - $constant
//components/heroes-constant.js 'use strict'; angular .module('heroesApp.heroesConstant', []) .constant('heroesConstant', 'HERO!');
angularjs services/
Servios no Angular - $value
Servios no Angular - $value
//components/heroes-value.js 'use strict'; angular .module('heroesApp.heroesValue', []) .value('heroesValue', 'HERO!');
angularjs services/
Servios no Angular
angularjs services: boas prticas e reuso de cdigo /
obrigado