Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@r_mdias Rodolfo Dias JavaScript Developer at Inatel Competence Center

Slide 3

Slide 3 text

Recife

Slide 4

Slide 4 text

Recife

Slide 5

Slide 5 text

Recife

Slide 6

Slide 6 text

Recife

Slide 7

Slide 7 text

SRS

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

angularjs services/ Serviço-Definição

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Serviços em aplicações

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

angularjs services/ Serviços no Angular

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

AngularJS Hero Services

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

angularjs services/ Serviços no Angular - $provider

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

angularjs services/ Serviços no Angular - $service

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

angularjs services/ Serviços no Angular - $factory

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

angularjs services/ Serviços no Angular - $constant

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

angularjs services/ Serviços no Angular - $value

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

angularjs services/ Serviços no Angular

Slide 58

Slide 58 text

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