tdc2016sp - trilha frameworks javascript
If you can't read please download the document
TRANSCRIPT
-
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