Explication détaillée des services personnalisés dans AngularJS, introduction à l'utilisation de l'usine, du service et du fournisseur

寻∝梦

Libérer： 2018-09-08 15:06:18

original

1462 Les gens l'ont consulté

Cet article parle principalement de l'introduction des services personnalisés de angularjs. Quelques exemples d'utilisation spécifiques de services personnalisés. Jetons maintenant un œil à cet article

Préface

3 façons de créer des services personnalisés.

Usine
Service
Fournisseur

Tout le monde devrait savoir qu'AngularJS a été inventé par le personnel du backend pendant son temps libre. Il a principalement appliqué la pensée en couches qui existe depuis longtemps dans le backend. Nous devons donc comprendre le rôle de la superposition. Si vous êtes une personne front-end et que vous ne comprenez pas ce qu'est la superposition, vous feriez mieux de demander à vos collègues back-end.
Couche dao : C'est la couche Modèle Lorsqu'elle est en arrière-plan, le rôle de cette couche est d'écrire les données qui interagissent avec la base de données, elle est principalement utilisée pour écrire en ajax.
Couche de service : principalement responsable de l'écriture du code logique, mais les données peuvent également être conservées dans angulaireJS (agissant comme un conteneur de données) pour être utilisées par différents contrôleurs.
Couche contrôleur : La couche de contrôle, où les contrôleurs sont écrits en angulaireJS. Essayez de ne pas écrire de logique inutile dans le contrôleur et essayez de l'écrire dans la couche de service.
Il existe donc trois façons de créer des services personnalisés.

1.factory

Un service créé à l'aide de la méthode factory consiste à renvoyer un Un objet dont les propriétés ont des méthodes. Équivalent à : 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>

Copier après la connexion

Dans le service personnalisé, injectez l'exemple de service, mais l'objet scope $scope ne peut pas être injecté.

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

Copier après la connexion

2.service

Créez un service personnalisé via la méthode de service, qui équivaut à un objet de new : var s = new myService ();, tant que des propriétés et des méthodes y sont ajoutées, elles peuvent être appelées dans le contrôleur. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour en savoir)

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

Copier après la connexion

3.provder

Seul le fournisseur est un service qui peut transmettre la fonction .config(). Si vous souhaitez effectuer une configuration à l'échelle du module avant que l'objet de service ne soit activé, vous devez choisir le fournisseur. A noter que lors de l'injection du fournisseur dans la fonction config, le nom doit être : ProviderName+Provider
L'avantage d'utiliser Provider est que vous pouvez modifier l'objet Provider dans la fonction app.config avant de le transmettre à un autre. parties de l'application. Elle est modifiée.
Lorsque vous créez un service à l'aide d'un fournisseur, les seules propriétés et méthodes accessibles dans votre contrôleur sont le contenu renvoyé via la fonction $get().

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

Copier après la connexion

4. Injectez des services personnalisés dans le filtre

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

Copier après la connexion

Cet article se termine ici (pensez Pour en savoir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation AngularJS pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!