Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der benutzerdefinierten Dienste in AngularJS, Einführung in die Verwendung von Factory, Service und Provider

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

寻∝梦Original: 2018-09-08 15:06:181394Durchsuche

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>

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>

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>

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>

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>

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!

php ajax var 对象作用域 this 数据库

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

Vorheriger Artikel：Wie lade ich Dateien in AngularJS hoch? Detaillierte Einführung in die Upload-Funktion von AngularJSNächster Artikel：Wie lade ich Dateien in AngularJS hoch? Detaillierte Einführung in die Upload-Funktion von AngularJS

In Verbindung stehende Artikel

Mehr sehen