Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie benutzerdefinierte Dienste mit AngularJS

Implementieren Sie benutzerdefinierte Dienste mit AngularJS

一个新手
一个新手Original
2017-09-23 09:54:311682Durchsuche

Nehmen wir als Beispiel Cookies.

Schritt 1: Öffnen Sie zunächst die Konsole und installieren Sie mit Bower Angular-Cookies

bower --save angular-cookies

Schritt 2: Erstellen Sie eine Cache.js-Datei im Dienstverzeichnis.

Schritt 3: Fügen Sie das Angular-Cookies-Modul in index.html ein.

Schritt 4: ngCookies-Abhängigkeit in app.js hinzufügen.

'use strict'angular.module('app',['ui.router','ngCookies']);

Schritt 5: Rufen Sie den $cookies-Dienst in Cache.js auf

Methode 1: Service-Service-Methode

'use strict';
angular.module('app').service('cache', ['$cookies', function($cookies){
    this.put = function(key, value){
        $cookies.put(key, value);
    };    this.get = function(key) {
        return $cookies.get(key);
    };    this.remove = function(key) {
        $cookies.remove(key);
    };
}]);

Methode 2: Facotry Service Factory Die Methode

angular.module('app').factor('cache', ['$cookies', function($cookies){
    //也就是说factor和service同时声明服务,作用是一样的,它们的区别在于我们调用factor的时候,factor可以在return对象之前可以声明一些私有的属性。如:
    var obj = {};//相当于一个私有属性,外部不可访问,而直接声明service是没有这个功能的。

    //注意:factor和service不同,我们不能再this这个当前对象上面添加属性了,而是返回一个对象
    //这个对象所带来的属性就是我们外面引用的factor可以引用的属性
    return {
            put : function(key, value){
            $cookies.put(key, value);
            };
            get : function(key) {
                return $cookies.get(key);
            };
            remove : function(key) {
                $cookies.remove(key);
            };        
    }
}]);

bedeutet, dass Faktor und Dienst gleichzeitig Dienste deklarieren und die Wirkung gleich ist. Der Unterschied zwischen ihnen besteht darin, dass der Faktor beim Aufrufen von Faktor einige private Attribute vor dem Rückgabeobjekt deklarieren kann.
Wenn keine Notwendigkeit besteht, interne private Eigenschaften zu deklarieren, sind ihre Funktionen dieselben.
Man muss bedenken, dass der Faktor ein Objekt direkt zurückgeben muss, während der Dienst nur eine Funktion direkt zurückgeben kann.

Schritt 6: Deklarieren Sie diesen Dienstcache im Controller, wenn Sie ihn verwenden, z. B.

'use strict';
angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope','cache',function ($q,$http,$state,$scope,cache) {
  cache.put('to','day');//存入这个值
  cache.remove('to'); //删除}]);

Das obige ist der detaillierte Inhalt vonImplementieren Sie benutzerdefinierte Dienste mit AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn