AngularJS自定义服务

最新推荐文章于 2020-01-20 15:29:35 发布

迷人的脚毛

最新推荐文章于 2020-01-20 15:29:35 发布

阅读量638

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/qq_40090482/article/details/78253643

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如同指令一样，系统内置的服务以$开头，我们也可以自己定义一个服务。定义服务的方式有如下几种：

使用Module的factory方法

使用Module的service方法

使用系统内置的$provide服务

a. factory：可以认为是设计模式中的工厂方法，就是你提供一个方法，该方法返回一个对象实例，对于angularJS中的factory来说，就是先定义一个对象，给这个对象添加属性和方法，然后返回这个对象。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myapp",[]);

        app.constant("divide_0_tips", "除数不能等于零！");

        // 依赖注入：5个重要的组件factory、service、provider、value、constant
        // 建一个计算器服务，服务名：calculator，有4个方法：jia、jiang、cheng、chu
        app.factory("myfu",function () {
            return{
                jia:function (mun1,mun2) {
                    return mun1+mun2;
                },
                jiang: function (mun1,mun2) {
                    return mun1 - mun2;
                },
                cheng: function (mun1,mun2) {
                    return mun1 * mun2;
                },
                chu : function (mun1,mun2) {
                    if(mun2!=0){
                        return mun1/ mun2;
                    }
                    console.log(divide_0_tips);
                    return 0;
                },

            }
        })
        //定义一个服务名：myfu       注入依赖
        app.controller("myctrl",function ($scope,myfu) {

            $scope.a1=myfu.jia(8,4);
            $scope.a2=myfu.jiang(8,4);
            $scope.a3=myfu.cheng(8,4);
            $scope.a4=myfu.chu(8,4);
        })
    </script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
    <div>8+4={{ a1 }}</div>
    <div>8+4={{ a2 }}</div>
    <div>8+4={{ a3 }}</div>
    <div>8+4={{ a4 }}</div>
</div>

</body>
</html>

b. service：通过 new 运算符进行实例化，可以认为是一个类型，只要把属性和方法添加到 this 对象上即可，不用显式返回什么对象。

它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适。

注意：service可以定义基本类型引用类型数据，也可以定义方法。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myapp",[]);
        app.constant("divide_0_tips", "除数不能等于零！");

        // 建一个计算器服务，服务名：myfu，有4个方法：jia、jian、cheng、chu
        //service 服务
        app.service("myfu",function () {
            this.jia=function (mun1,mun2) {
                return mun1 + mun2;
            };
            this.jian=function (mun1,mun2) {
                return mun1 - mun2;
            };
            this.cheng=function (mun1,mun2) {
                return mun1 * mun2;
            };
            this.chu=function (mun1,mun2) {
                if(mun2!=0){
                    return mun1 / mun2;
                }
               console.log(divide_0_tips);
                return 0;
            };
        });
        //定义一个服务名：myfu       注入依赖
        app.controller("myctrl",function ($scope,myfu) {
            $scope.a1=myfu.jia(8,4);
            $scope.a2=myfu.jian(8,4);
            $scope.a3=myfu.cheng(8,4);
            $scope.a4=myfu.chu(8,4);

        })
    </script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
    <div>8+4={{ a1 }}</div>
    <div>8-4={{ a2 }}</div>
    <div>8*4={{ a3 }}</div>
    <div>8/4={{ a4 }}</div>
</div>


</body>
</html>

c. provider：只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：providerName+Provider。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myapp",[]);
        // 建一个计算器服务，服务名：myfu，有4个方法：jia、jiang、cheng、chu
        app.provider("myfu",function () {
            this.$get=function () {
                return{
                    jia: function (mun1,mun2) {
                        return mun1 + mun2 ;
                    },
                    jiang: function (mun1,mun2) {
                        return mun1 - mun2;
                    },
                    cheng: function (mun1,mun2) {
                        return mun1* mun2;
                    },
                    chu : function (mun1, mun2) {
                        if (mun2!=0){
                            return mun1/ mun2;
                        }

                       return 0;
                    }
                }
            }

        });
                   //自己定义的服务名：myfu
        app.controller("myctrl",function ($scope,myfu) {
            $scope.a1=myfu.jia(8,4);
            $scope.a2=myfu.jiang(8,4);
            $scope.a3=myfu.cheng(8,4);
            $scope.a4=myfu.chu(8,4);
        });
    </script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
    <div>8 + 4 ={{ a1 }}</div>
    <div>8 - 4 ={{ a2 }}</div>
    <div>8 * 4 ={{ a3 }}</div>
    <div>8 / 4 ={{ a4 }}</div>
</div>

</body>
</html>