AngularJS
tjänster

Hur man skapar en tjänst

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

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

Hur man använder en tjänst

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

I mallen med den här kontrollern skriver du sedan:

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

eller

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

Naturligtvis skulle du i verklig kod interagera med tjänsten med hjälp av metoder på styrenheten, som i sin tur delegerar till tjänsten. Exemplet ovan ökar helt enkelt räknarvärdet varje gång styrenheten används i en mall.

Tjänster i Angularjs är singletons:

Tjänster är singleton-objekt som bara instanseras en gång per app (av $ -injektorn) och lata laddas (skapas endast vid behov).

En singleton är en klass som bara tillåter en instans av sig själv att skapa - och ger enkel, enkel åtkomst till nämnda instans. Som anges här

Skapa en tjänst med hjälp av angular.factory

Definiera först tjänsten (i detta fall använder den fabriksmönstret):

.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 kan du använda tjänsten för att dela data mellan styrenheter:

.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 - sanera och återge innehåll och resurser i mallar

$ sce ("Strict Contextual Escaping") är en inbyggd vinkeltjänst som automatiskt sanerar innehåll och interna källor i mallar.

att injicera externa källor och rå HTML i mallen kräver manuell inslagning av $sce .

I det här exemplet skapar vi ett enkelt $ sce sanitetsfilter: `.

demo

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

Användning i mall

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

Hur man skapar en tjänst med beroenden med '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;
   }]);

Registrera en tjänst

Det vanligaste och flexibla sättet att skapa en tjänst använder API-fabriken angular.module:

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

Servicefabriksfunktionen kan vara antingen en funktion eller en matris, precis som hur vi skapar styrenheter:

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

För att exponera en metod i vår tjänst kan vi placera den som ett attribut på serviceobjektet.

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

Skillnaden mellan service och fabrik

1) Tjänster

En tjänst är en constructor som åberopas en gång vid körning med new , precis som vi skulle göra med vanlig javascript med bara skillnad att AngularJs kallar det new bakom kulisserna.

Det finns en tumregel att komma ihåg vid tjänster

1. Tjänster är konstruktörer som kallas med new

Låt oss se ett enkelt exempel där vi skulle registrera en tjänst som använder $http tjänst för att hämta studentinformation och använda den i styrenheten

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

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

Vi injicerar bara den här tjänsten i regulatorn

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

När ska man använda?

Använd .service() vart du vill använda en konstruktör. Det används vanligtvis för att skapa offentliga API: er precis som getStudentDetails() . Men om du inte vill använda en konstruktör och vill använda ett enkelt API-mönster istället, är det inte mycket flexibilitet i .service() .

2) Fabrik

Även om vi kan uppnå alla saker med .factory() som vi skulle använda, med .services() , gör det inte .factory() "samma som" .service() . Det är mycket kraftfullare och flexibelt än .service()

En. .factory() är ett designmönster som används för att returnera ett värde.

Det finns två tumregler att komma ihåg vid fabriker

1. Fabriker returnerar värden
2. Fabriker (kan) skapa objekt (valfritt objekt)

Låt oss se några exempel på vad vi kan göra med .factory()

Återvändande av objekt bokstäver

Låt oss se ett exempel där fabriken används för att returnera ett objekt med ett grundläggande avslöjande modulmönster

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

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

Användning i en styrenhet

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

Återvändande stängningar

Vad är en stängning?

Stängningar är funktioner som refererar till variabler som används lokalt, MEN definieras i ett avgränsande omfång.

Följande är ett exempel på en stängning

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

Den "underbara" delen är att den har åtkomst till name som ligger i föräldraområdet.

Låter oss använda ovanstående stängningsexempel inuti .factory()

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

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

Användning i en styrenhet

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

Skapa konstruktörer / instanser

.service() skapar konstruktörer med en uppmaning till new som sett ovan. .factory() kan också skapa konstruktörer med en uppmaning till new

Låt oss se ett exempel på hur man kan uppnå detta

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

Användning i en styrenhet

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