AngularJS
Diensten

Een service maken

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

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

Een service gebruiken

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

In de sjabloon met deze controller zou je dan schrijven:

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

of

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

Natuurlijk zou u in echte code interactie hebben met de service met behulp van methoden op de controller, die op hun beurt delegeren aan de service. Het bovenstaande voorbeeld verhoogt eenvoudig de tellerwaarde elke keer dat de controller in een sjabloon wordt gebruikt.

Diensten in Angularjs zijn singletons:

Services zijn singleton-objecten die slechts één keer per app worden gestart (door de $ injector) en lui worden geladen (alleen gemaakt als dat nodig is).

Een singleton is een klasse waarmee slechts één exemplaar van zichzelf kan worden gemaakt - en geeft eenvoudige, gemakkelijke toegang tot dit exemplaar. Zoals hier vermeld

Een service maken met angular.factory

Definieer eerst de service (in dit geval gebruikt deze het fabriekspatroon):

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

Nu kunt u de service gebruiken om gegevens tussen controllers te delen:

.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 - inhoud en bronnen in sjablonen opschonen en weergeven

$ sce ("Strict Contextual Escaping") is een ingebouwde hoekservice die automatisch inhoud en interne bronnen in sjablonen opschoont.

het invoegen van externe bronnen en onbewerkte HTML in de sjabloon vereist het handmatig inpakken van $sce .

In dit voorbeeld maken we een eenvoudig $ sce sanitatiefilter: `.

demonstratie

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

Gebruik in sjabloon

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

Een service met afhankelijkheden maken met behulp van 'array syntax'

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

Een service registreren

De meest gebruikelijke en flexibele manier om een service te maken, maakt gebruik van de angular.module API-fabriek:

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

De service factory-functie kan een functie of een array zijn, net zoals de manier waarop we controllers maken:

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

Om een methode voor onze service zichtbaar te maken, kunnen we deze als attribuut op het serviceobject plaatsen.

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

Verschil tussen service en fabriek

1) Diensten

Een service is een constructor die eenmaal tijdens runtime met new wordt aangeroepen, net als wat we zouden doen met gewoon javascript met het enige verschil dat AngularJs achter de schermen het new AngularJs .

Er is één duimregel om te onthouden in het geval van services

1. Services zijn constructeurs die met new worden aangeroepen

Laten we een eenvoudig voorbeeld bekijken waarin we een service zouden registreren die $http service gebruikt om studentgegevens op te halen en deze in de controller gebruiken

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

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

We injecteren deze service gewoon in de controller

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

Wanneer te gebruiken?

Gebruik .service() waar u een constructor wilt gebruiken. Het wordt meestal gebruikt om openbare API's te maken, net als getStudentDetails() . Maar als u geen constructor wilt gebruiken en in plaats daarvan een eenvoudig API-patroon wilt gebruiken, dan is er niet veel flexibiliteit in .service() .

2) Fabriek

Hoewel we alle dingen kunnen bereiken met .factory() wat we zouden doen, met .services() , maakt .factory() "hetzelfde als" .service() . Het is veel krachtiger en flexibeler dan .service()

Een .factory() is een ontwerppatroon dat wordt gebruikt om een waarde te retourneren.

Er zijn twee duimregels om te onthouden in het geval van fabrieken

1. Fabrieken geven waarden terug
2. Fabrieken (kunnen) objecten maken (elk object)

Laten we enkele voorbeelden bekijken van wat we kunnen doen met .factory()

Terugkerende objecten Literals

Laten we een voorbeeld bekijken waarin de fabriek wordt gebruikt om een object te retourneren met behulp van een eenvoudig Revealing-modulepatroon

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

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

Gebruik in een controller

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

Terugkerende sluitingen

Wat is een sluiting?

Sluitingen zijn functies die verwijzen naar variabelen die lokaal worden gebruikt, MAAR gedefinieerd in een omsluitend bereik.

Hierna volgt een voorbeeld van een sluiting

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

Het "prachtige" deel is dat het toegang heeft tot de name die zich in het bovenliggende bereik bevindt.

Laten we het bovenstaande sluitingsvoorbeeld in .factory()

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

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

Gebruik in een 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);

Constructors / instanties maken

.service() maakt constructeurs met een aanroep naar new zoals hierboven te zien. .factory() kan ook constructors maken met een aanroep naar new

Laten we een voorbeeld bekijken hoe dit te bereiken

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

Gebruik in een 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);