Detaillierte Erläuterung der benutzerdefinierten Dienste in AngularJS, Einführung in die Verwendung von Factory, Service und Provider

寻∝梦

Freigeben： 2018-09-08 15:06:18

Original

1462 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um die Einführung benutzerdefinierter Dienste von angularjs. Einige spezifische Anwendungsbeispiele für benutzerdefinierte Dienste. Werfen wir nun einen Blick auf diesen Artikel

Vorwort

3 Möglichkeiten, benutzerdefinierte Dienste zu erstellen.

Fabrik
Service
Anbieter

Jeder sollte wissen, dass AngularJS von Backend-Mitarbeitern in ihrer Freizeit erfunden wurde. Er hat hauptsächlich das seit langem bestehende mehrschichtige Denken im Backend angewendet. Wir müssen also die Rolle der Schichtung verstehen. Wenn Sie eine Front-End-Person sind und nicht verstehen, was Schichtung ist, fragen Sie besser Ihre Back-End-Kollegen.
dao-Schicht : Im Hintergrund besteht die Rolle dieser Schicht darin, die Ebene zu schreiben, die mit der Datenbank interagiert. In AngularJS wird sie hauptsächlich zum Schreiben von Ajax verwendet.
Serviceschicht : Hauptsächlich für das Schreiben von Logikcode verantwortlich, Daten können jedoch auch in AngularJS (als Datencontainer) zur Verwendung durch verschiedene Controller gespeichert werden.
Controller-Schicht : Die Kontrollschicht, in der Controller in AngularJS geschrieben sind. Versuchen Sie, keine unnötige Logik in den Controller zu schreiben, sondern versuchen Sie, sie in die Serviceschicht zu schreiben.
Es gibt also drei Möglichkeiten, benutzerdefinierte Dienste zu erstellen.

1.factory

Ein mit der Factory-Methode erstellter Dienst soll a zurückgeben Ein Objekt, dessen Eigenschaften Methoden haben. Entspricht: var f = myFactory();

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><p ng-app="myApp" ng-controller="myCtrl">
    <p>{{r}}</p></p><script>
    //创建模型
    var app = angular.module(&#39;myApp&#39;, []);    //通过工厂模式创建自定义服务
    app.factory(&#39;myFactory&#39;, function() {
        var service = {};//定义一个Object对象&#39;
        service.name = "张三";        var age;//定义一个私有化的变量
        //对私有属性写getter和setter方法
        service.setAge = function(newAge){
            age = newAge;
        }
        service.getAge = function(){
            return age; 
        }        return service;//返回这个Object对象
    });    //创建控制器
    app.controller(&#39;myCtrl&#39;, function($scope, myFactory) {
        myFactory.setAge(20);
        $scope.r =myFactory.getAge();
        alert(myFactory.name);
    });</script></body></html>

Nach dem Login kopieren

Im benutzerdefinierten Dienst das Dienstbeispiel einfügen, aber das $scope-Bereichsobjekt kann nicht eingefügt werden.

<script>    var app = angular.module(&#39;myApp&#39;, []);
    app.factory(&#39;myFactory&#39;, function($http,$q) {
        var service = {};
        service.name = "张三";        //请求数据
        service.getData = function(){
            var d = $q.defer();            $http.get("url")//读取数据的函数。
            .success(function(response) {
                d.resolve(response);
            })
            .error(function(){
                d.reject("error");
            });            return d.promise;
        }       
        return service;
    });
    app.controller(&#39;myCtrl&#39;, function($scope, myFactory) {
        //alert(myFactory.name);
        myFactory.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });;
    });
</script>

Nach dem Login kopieren

2.service

Erstellen Sie einen benutzerdefinierten Service über die Service-Methode, die einem neuen Objekt entspricht: var s = new myService () ; können im Controller nur Eigenschaften und Methoden aufgerufen werden, die dazu hinzugefügt wurden. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual , um mehr zu erfahren)

<p ng-app="myApp" ng-controller="myCtrl">
    <h1>{{r}}</h1></p><script>
    var app = angular.module(&#39;myApp&#39;, []);

    app.service(&#39;myService&#39;, function($http,$q) {
        this.name = "service";        this.myFunc = function (x) {
            return x.toString(16);//转16进制
        }        this.getData = function(){
            var d = $q.defer();
            $http.get("ursl")//读取数据的函数。
                .success(function(response) {
                d.resolve(response);
            })
                .error(function(){
                alert(0)
                d.reject("error");
            });            return d.promise;
        }
    });
    app.controller(&#39;myCtrl&#39;, function($scope, myService) {
        $scope.r = myService.myFunc(255);
        myService.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });
    });</script>

Nach dem Login kopieren

3.provder

Einziger Anbieter ist ein Dienst, der die Funktion .config() übergeben kann. Wenn Sie eine modulweite Konfiguration durchführen möchten, bevor das Dienstobjekt aktiviert wird, sollten Sie den Anbieter auswählen. Es ist zu beachten, dass beim Einfügen des Anbieters in die Konfigurationsfunktion der Name lauten sollte: ProviderName+Provider. Der Vorteil der Verwendung von Provider besteht darin, dass Sie das Provider-Objekt in der Funktion app.config ändern können, bevor Sie es an andere übergeben Teile der Anwendung werden geändert.
Wenn Sie einen Dienst mithilfe eines Anbieters erstellen, sind die einzigen Eigenschaften und Methoden, auf die in Ihrem Controller zugegriffen werden kann, die Inhalte, die über die Funktion $get() zurückgegeben werden.

<body><p ng-app="myApp" ng-controller="myCtrl"></p><script>
    var app = angular.module(&#39;myApp&#39;, []);    //需要注意的是：在注入provider时，名字应该是：providerName+Provider   
    app.config(function(myProviderProvider){
        myProviderProvider.setName("大圣");       
    });
    app.provider(&#39;myProvider&#39;, function() {
        var name="";        var test={"a":1,"b":2};        //注意的是，setter方法必须是(set+变量首字母大写)格式
        this.setName = function(newName){
            name = newName  
        }        this.$get =function($http,$q){
            return {
                getData : function(){
                    var d = $q.defer();
                    $http.get("url")//读取数据的函数。
                        .success(function(response) {
                            d.resolve(response);
                        })
                        .error(function(){
                            d.reject("error");
                        });                    return d.promise;
                },                "lastName":name,                "test":test
            }   
        }

    });
    app.controller(&#39;myCtrl&#39;, function($scope,myProvider) {
        alert(myProvider.lastName);
        alert(myProvider.test.a)
        myProvider.getData().then(function(data){
            //alert(data)
        },function(data){
            //alert(data)
        });
    });</script></body>

Nach dem Login kopieren

4. Fügen Sie benutzerdefinierte Dienste in den Filter ein

<body><p ng-app="myApp">
    在过滤器中使用服务:    <h1>{{255 | myFormat}}</h1></p><script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.service(&#39;hexafy&#39;, function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    });
    app.filter(&#39;myFormat&#39;,[&#39;hexafy&#39;, function(hexafy) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);</script></body>

Nach dem Login kopieren

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie einfach zu Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der benutzerdefinierten Dienste in AngularJS, Einführung in die Verwendung von Factory, Service und Provider. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!