AngularJS自定义服务

来源：互联网发布：弹幕视频网站源码编辑：程序博客网时间：2024/06/05 10:47

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

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

使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

最后附上图，这三个自定义服务实现的效果都一样：

阅读全文

0 0