您现在的位置:首页 >> 前端 >> 内容

Angular中的$provide(自定义服务)

时间:2017/2/24 22:22:00 点击:

  核心提示:Angular中的$provide(自定义服务)自定义服务的三种方式通过provider方式 通过factory方式,factory方式创建的服务必须要有返回值,可以返回任意类型的值,基本数据类型或者...

Angular中的$provide(自定义服务)

自定义服务的三种方式

通过provider方式 通过factory方式,factory方式创建的服务必须要有返回值,可以返回任意类型的值,基本数据类型或者复合数据类型。 通过service方式,service方式创建的服务必须返回一个复合数据类型(对象或数组)。

$provide如何实现自定义服务

依赖注入$provide

Angular自定义服务方式不只一种,今天主要介绍如何通过provide实现自定义服务,provide和scope一样是一个依赖注入对象,scope经常在使用controller时依赖注入,那么我们的$provide要如何依赖注入呢,先看看下面的代码:

<p ng-app="papp">

    <p ng-controller="pcontrol"></p>

</p>

<script>

    var papp=angular.module("papp",[],function ($provide) {

    });

</script>

在加载模块时,在第三个参数处添加一个function,这时我们就可以依赖注入$provide。

通过$provide.provider实现自定义服务

通过$provide的provider()实现自定义服务,代码如下:

var papp=angular.module("papp",[],function ($provide) {

        $provide.provider("myprovider",function () {

           this.$get=function () {

               return ["hello provider"];

           }

        });

    });

上面的代码:自定义了一个名为myprovider的服务,服务对象是一个[“hello provider”],自定义服务后我们要怎么使用它呢?想想我们是如何使用scope的,当成功自定义一个服务后,我们可以像使用scope那样使用自定义的服务。代码如下:

papp.controller("pcontrol",function ($scope,myprovider) {

        console.log(myprovider);

    });

如上代码,控制台输出的便是一个[“hello provider”]。这里不贴图了,可直接复制代码测试。

通过$provide.factory实现自定义服务

通过$provide.factory()实现自定义服务,实现方式和provider()稍微有些区别,并且可以返回任意的数据类型,我们还是看看代码吧:

var papp=angular.module("papp",[],function ($provide) {

       $provide.factory("myfactory",function () {

           return ["hello myfactory"];

       });

    });

如上代码,自定义了一个myfactory服务,如何使用它?用法和provider()自定义的服务一样,还是看看代码吧:

papp.controller("pcontrol",function ($scope,myfactory) {

        console.log(myfactory);

    });

通过$provide.service实现自定义服务

service()的方式和factory的一样。仅仅是返回值类型,factory()方式可以返回任何的数据类型,而service()的返回值必须是复合数据类型(对象或者数组)。直接上代码:

var papp=angular.module("papp",[],function ($provide) {

       $provide.service("myservice",function () {

           return ["hello service"];

       });

    });

自定义了myservice服务,使用自定义的myservice服务,代码:

papp.controller("pcontrol",function ($scope,myservice) {

        console.log(myservice);

    });

$provide总结

$provide的三种自定义服务的方式:provider、factory、service。其中factory返回值可以是任意的数据类型(不论基本类型还是复合类型),service则必须返回复合类型(对象或数组). 如何使用自定义服务:往Angular中自定义一个服务,其实相当于我们往Angular中添加了一个依赖注入的对象,使用方式就像$scope那样。

自定义服务当然还有其他方式,列如factory方式可以直接用模块app.factory()进行自定义,这里就不再介绍了,今天主要是介绍$provie的用法。

用什么错误和不足,望能够指出和补充。

Tags:AN NG GU UL 
作者:网络 来源:qq_3093714