AngularJS
Prestations de service

Comment créer un service

angular.module("app")
  .service("counterService", function(){

    var service = {
        number: 0
    };
    
    return service;
   });

Comment utiliser un service

    angular.module("app")
        
        // Custom services are injected just like Angular's built-in services
        .controller("step1Controller", ['counterService', '$scope', function(counterService, $scope) {
            counterService.number++;
            // bind to object (by reference), not to value, for automatic sync
            $scope.counter = counterService;
        })

Dans le modèle utilisant ce contrôleur, vous écrivez alors:

// editable
<input ng-model="counter.number" />

ou

// read-only
<span ng-bind="counter.number"></span>

Bien sûr, en code réel, vous interagissez avec le service en utilisant des méthodes sur le contrôleur, qui à son tour délègue au service. L'exemple ci-dessus incrémente simplement la valeur du compteur chaque fois que le contrôleur est utilisé dans un modèle.

Les services à Angularjs sont singletons:

Les services sont des objets singleton qui ne sont instanciés qu'une fois par application (par l'injecteur $) et chargés paresseux (créés uniquement si nécessaire).

Un singleton est une classe qui ne permet de créer qu'une seule instance - et donne un accès simple et facile à cette instance. Comme indiqué ici

Créer un service avec angular.factory

Définissez d'abord le service (dans ce cas, il utilise le modèle d'usine):

.factory('dataService', function() {
    var dataObject = {};
    var service = {
        // define the getter method
        get data() {
            return dataObject;
        },
        // define the setter method
        set data(value) {
            dataObject = value || {};
        }
    };
    // return the "service" object to expose the getter/setter
    return service;
})

Vous pouvez maintenant utiliser le service pour partager des données entre les contrôleurs:

.controller('controllerOne', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // create an object to store
    var someObject = {
        name: 'SomeObject',
        value: 1
    };
    // store the object
    this.dataService.data = someObject;
})

.controller('controllerTwo', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // this will automatically update with any changes to the shared data object
    this.objectFromControllerOne = this.dataService.data;
})

$ sce - assainit et rend le contenu et les ressources dans des modèles

$ sce ("Strict Contextual Escaping") est un service angulaire intégré qui nettoie automatiquement le contenu et les sources internes dans les modèles.

L'injection de sources externes et de HTML brut dans le modèle nécessite l' $sce manuelle de $sce .

Dans cet exemple, nous allons créer un simple filtre d'assainissement $ sce: `.

Démo

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

Utilisation dans le modèle

<div ng-repeat="item in items">
    
    // Sanitize external sources
    <ifrmae ng-src="{{item.youtube_url | sanitizer}}">
    
    // Sanitaize and render HTML 
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

Comment créer un service avec des dépendances en utilisant la "syntaxe de tableau"

angular.module("app")
  .service("counterService", ["fooService", "barService", function(anotherService, barService){

    var service = {
        number: 0,
        foo: function () {
            return fooService.bazMethod(); // Use of 'fooService'
        },
        bar: function () {
            return barService.bazMethod(); // Use of 'barService'
        }
    };
    
    return service;
   }]);

Enregistrement d'un service

La méthode la plus courante et la plus flexible pour créer un service utilise la fabrique angular.module API:

angular.module('myApp.services', []).factory('githubService', function() {       
   var serviceInstance = {};
   // Our first service
   return serviceInstance;
});

La fonction fabrique de services peut être une fonction ou un tableau, tout comme la façon dont nous créons les contrôleurs:

// Creating the factory through using the
// bracket notation
angular.module('myApp.services', [])
.factory('githubService', [function($http) {
}]);

Pour exposer une méthode sur notre service, nous pouvons la placer en tant qu'attribut sur l'objet de service.

angular.module('myApp.services', [])
    .factory('githubService', function($http) {
        var githubUrl = 'https://api.github.com';
        var runUserRequest = function(username, path) {
        // Return the promise from the $http service
        // that calls the Github API using JSONP
        return $http({
            method: 'JSONP',
            url: githubUrl + '/users/' +
            username + '/' +
            path + '?callback=JSON_CALLBACK'
        });
    }
// Return the service object with a single function
// events
return {
    events: function(username) {
    return runUserRequest(username, 'events');
    }
};

Différence entre service et usine

1) Services

Un service est une fonction constructor qui est appelée une fois lors de l'exécution avec new , tout comme ce que nous ferions avec un javascript simple, à la différence AngularJs appelle le new dans les coulisses.

Il y a une règle de pouce à retenir en cas de services

1. Les services sont des constructeurs appelés avec de new

Voyons un exemple simple où nous enregistrerions un service qui utilise le service $http pour récupérer les détails de l'étudiant, et l'utiliser dans le contrôleur

function StudentDetailsService($http) {
  this.getStudentDetails = function getStudentDetails() {
    return $http.get('/details');
  };
}

angular.module('myapp').service('StudentDetailsService', StudentDetailsService);

Nous venons d'injecter ce service dans le contrôleur

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

Quand utiliser?

Utilisez .service() où que vous souhaitiez utiliser un constructeur. Il est généralement utilisé pour créer des API publiques comme getStudentDetails() . Mais si vous ne voulez pas utiliser un constructeur et que vous souhaitez utiliser un modèle d'API simple, il n'y a pas beaucoup de flexibilité dans .service() .

2) usine

Même si nous pouvons réaliser toutes les choses en utilisant .factory() , en utilisant .services() , cela ne rend pas " .factory() identique à" .service() . Il est beaucoup plus puissant et flexible que .service()

Un .factory() est un modèle de conception utilisé pour renvoyer une valeur.

Il y a deux règles de pouce à retenir dans le cas des usines

1. Les usines renvoient des valeurs
2. Les usines (peuvent) créer des objets (n'importe quel objet)

Voyons quelques exemples de ce que nous pouvons faire en utilisant .factory()

Retour des objets littéraux

Permet de voir un exemple où factory est utilisé pour renvoyer un objet en utilisant un modèle de module de base Revealing

function StudentDetailsService($http) {
  function getStudentDetails() {
    return $http.get('/details');
  }
  return {
    getStudentDetails: getStudentDetails
  };
}

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

Utilisation dans un contrôleur

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

Fermetures de retour

Qu'est-ce qu'une fermeture?

Les fermetures sont des fonctions qui font référence à des variables utilisées localement, MAIS définies dans une portée englobante.

Voici un exemple de fermeture

function closureFunction(name) {
  function innerClosureFunction(age) { // innerClosureFunction() is the inner function, a closure
    // Here you can manipulate 'age' AND 'name' variables both
  };
};

La partie "merveilleuse" est qu'elle peut accéder au name qui se trouve dans la portée parent.

.factory() exemple de fermeture ci-dessus à l'intérieur de .factory()

function StudentDetailsService($http) {
  function closureFunction(name) {
  function innerClosureFunction(age) {
    // Here you can manipulate 'age' AND 'name' variables
    };
  };
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

Utilisation dans un contrôleur

function StudentController(StudentDetailsService) {
  var myClosure = StudentDetailsService('Student Name'); // This now HAS the innerClosureFunction()
  var callMyClosure = myClosure(24); // This calls the innerClosureFunction()
};

angular.module('app').controller('StudentController', StudentController);

Création de constructeurs / instances

.service() crée des constructeurs avec un appel à new comme vu ci-dessus. .factory() peut également créer des constructeurs avec un appel à new

Voyons un exemple sur la façon d'y parvenir

function StudentDetailsService($http) {
  function Student() {
    this.age = function () {
        return 'This is my age';
    };
  }
  Student.prototype.address = function () {
        return 'This is my address';
  };
  return Student;
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

Utilisation dans un contrôleur

function StudentController(StudentDetailsService) {
  var newStudent = new StudentDetailsService();
  
  //Now the instance has been created. Its properties can be accessed.

 newStudent.age();
 newStudent.address();
  
};

angular.module('app').controller('StudentController', StudentController);