AngularJS
Servizi

Come creare un servizio

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

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

Come usare un servizio

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

Nel modello che usa questo controller scriveresti:

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

o

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

Naturalmente, nel codice reale si interagirebbe con il servizio utilizzando i metodi sul controller, che a sua volta delegherà al servizio. L'esempio sopra semplicemente incrementa il valore del contatore ogni volta che il controller viene utilizzato in un modello.

I servizi in Angularjs sono singoletti:

I servizi sono oggetti singleton creati solo una volta per app (da $ injector) e pigri (creati solo quando necessario).

Un singleton è una classe che consente di creare una sola istanza di se stessa e fornisce un accesso semplice e facile a detta istanza. Come affermato qui

Creare un servizio usando angular.factory

Definire innanzitutto il servizio (in questo caso utilizza lo schema di fabbrica):

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

Ora puoi utilizzare il servizio per condividere i dati tra i controller:

.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: disinfetta e rende il contenuto e le risorse nei modelli

$ sce ("Strict Contextual Escaping") è un servizio angolare incorporato che disinfetta automaticamente i contenuti e le fonti interne nei modelli.

l'iniezione di fonti esterne e HTML grezzo nel modello richiede il wrapping manuale di $sce .

In questo esempio creeremo un semplice filtro sanity $ sce: `.

dimostrazione

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

Utilizzo nel modello

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

Come creare un servizio con dipendenze usando la 'sintassi dell'array'

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

Registrazione di un servizio

Il modo più comune e flessibile per creare un servizio utilizza la fabbrica API angular.module:

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

La funzione di fabbrica del servizio può essere una funzione o un array, proprio come il modo in cui creiamo i controller:

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

Per esporre un metodo sul nostro servizio, possiamo inserirlo come attributo sull'oggetto servizio.

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

Differenza tra servizio e fabbrica

1) Servizi

Un servizio è una funzione di constructor che viene invocata una volta a runtime con new , proprio come farebbe con plain javascript con la sola differenza che AngularJs sta chiamando il new dietro le quinte.

C'è una regola del pollice da ricordare in caso di servizi

1. I servizi sono costruttori che vengono chiamati con new

Vediamo un semplice esempio in cui dovremmo registrare un servizio che utilizza il servizio $http per recuperare i dettagli dello studente e utilizzarlo nel controller

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

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

Abbiamo appena iniettato questo servizio nel controller

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

Quando usare?

Utilizzare .service() ovunque si desideri utilizzare un costruttore. Di solito viene utilizzato per creare API pubbliche proprio come getStudentDetails() . Ma se non si desidera utilizzare un costruttore e si desidera utilizzare un semplice schema API, allora non c'è molta flessibilità in .service() .

2) Fabbrica

Anche se siamo in grado di ottenere tutte le cose usando .factory() che faremmo usando .services() , non rende .factory() "uguale a" .service() . È molto più potente e flessibile di .service()

A .factory() è un modello di progettazione che viene utilizzato per restituire un valore.

Ci sono due regole del pollice da ricordare in caso di fabbriche

1. Le fabbriche restituiscono valori
2. Fabbriche (possono) creare oggetti (Qualsiasi oggetto)

Vediamo alcuni esempi su cosa possiamo fare usando .factory()

Restituzione di oggetti letterali

Vediamo un esempio in cui factory è usato per restituire un oggetto usando un modello di modulo Revealing di base

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

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

Utilizzo all'interno di un controller

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

Chiusure di ritorno

Cos'è una chiusura?

Le chiusure sono funzioni che fanno riferimento a variabili utilizzate localmente, ma definite in un ambito che racchiude.

Di seguito è riportato un esempio di chiusura

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

La parte "meravigliosa" è che può accedere al name che si trova nell'ambito genitore.

Consente di utilizzare l'esempio di chiusura sopra all'interno .factory()

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

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

Utilizzo all'interno di un controller

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

Creazione di costruttori / istanze

.service() crea costruttori con una chiamata a new come visto sopra. .factory() può anche creare costruttori con una chiamata a new

Vediamo un esempio su come ottenere questo

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

Utilizzo all'interno di un controller

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