Angularjs自定义服务~使用Module的provider方法

最新推荐文章于 2022-10-09 11:44:56 发布

Dewey666

最新推荐文章于 2022-10-09 11:44:56 发布

阅读量794

点赞数

分类专栏：效果初现文章标签： app.provider 自定义服务provider

本文链接：https://blog.csdn.net/IT666DHW/article/details/78272232

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Angularjs自定义服务~使用Module的provider方法</title>
      <!--  如同指令一样，系统内置的服务以$开头，自己定义一个服务。定义服务的方式有如下几种：
         · 使用Module的factory方法
         · 使用Module的service方法
         · 使用系统内置的$provide服务    
         
          3. provider：只有provder是能传 .config() 函数的 service。
                  如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。
                  需要注意的是：在config函数里注入provider时，名字应该是：自定义provider+Provider。 -->
      <script type="text/javascript" src="../js/angular.js" ></script>
      <script>
         var app = angular.module("myApp",[]);
         
         //（1）在config函数里注入provider时，名字应该是：自定义provider+Provider，如下：
         app.config(function(myProviderProvider){
            alert("自定义provider服务 执行顺序：1  先在config函数里注入自定义provider服务名称，可以设置属性值");
            myProviderProvider.setAge(43);    //在config函数里设置属性值
         });
         
         // 在当前应用程序app自定义服务对象：myProvider
         app.provider("myProvider",function(){
            var age;  
            //（2）自定义属性以函数传参的形式添加到this对象上
            this.setAge = function(newAge){    
               age = newAge;
               alert("自定义provider服务 执行顺序：2   再把自定义属性以函数传参的形式添加到this对象上");
            }
            
            //使用$get 发送提交数据，Provider提供了一个factory方法get(),它用于返回value值、service或factory服务数据
            this.$get = function(){
               //自定义对象，声明属性及其值，把先前定义的变量值赋给当前对象变量，最后返回新的对象
               var star = {};
               star.name = "吴京";
               star.starAge = age;
               return star;
            }
         });       
         
         //（3）在控制器myCtrl的作用域中调用自定义服务myProvider中数据
         app.controller("myCtrl",function($scope,myProvider){
            alert("自定义provider服务 执行顺序：3  最后在控制器myCtrl的作用域中调用自定义服务myProvider中数据");
            $scope.name = myProvider.name;
            $scope.starAge = myProvider.starAge;
         });
      </script>
   </head>
   
   <body ng-app="myApp" ng-controller="myCtrl">
      <p>偶像实力派：{{name}}  年龄：{{starAge}}</p>
   </body>
</html>