首页 > 代码库 > 自定义服务 factory 和 service

自定义服务 factory 和 service

2024-09-25 18:50:39   213人阅读

1、使用factory 方法
必须有返回值 即return ，factory只是调用普通的function，可以返回任何东西。

HTML 代码

<body ng-app="myApp">
 <div ng-controller="myCtrl">
     <ul>
         <li>{{data.name}}</li>
         <li>{{data.age}}</li>
         <li>{{data.phone}}</li>
     </ul>
     <p>{{strfun("hello")}}</p>
     <p>{{array(1)}}</p>
 </div>
</body>

　　JS代码

<script type="text/javascript">
    var app=angular.module(‘myApp‘,[]);
    //返回一个JSON对象
    app.factory(‘$outData‘, function(){
        var data=http://www.mamicode.com/{"自定义服务"+ text;
            }
        }
        //返回一个数组
    }).factory(‘$myArray‘,function(){
        return [‘1‘,‘12‘,‘123‘];
    });
      //控制器层  注入服务
      app.controller(‘myCtrl‘,[‘$scope‘,‘$outData‘,‘$myFun‘,‘$myArray‘,function($scope,$outData,$myFun,$myArray){
            $scope.data=http://www.mamicode.com/$outData;>

　　运行结果

      技术分享

2、service 方法自定义服务
这个方法可以接受一个构造函数，不用返回东西，在注入服务时，angular会检测到是service创建的服务，会自动调用new关键字来实例化这个服务，生成服务对象。service是一个构造器。

HTML 代码

<body ng-app="myApp">
 <div ng-controller="myCtrl">
            <p>{{name}}</p>
            <p>{{age}}</p>
            <p>{{phone}}</p>
            <p>{{fun()}}</p>      
 </div>

　JS 代码

<script type="text/javascript">  
var app=angular.module(‘myApp‘,[]);
     //返回一个构造函数
     app.service(‘mydata‘,function(){
         this.name=‘Tom‘,
         this.age=18,
         this.phone=‘12346789021‘,
         this.fun=function(){
             return "service ";
         }
     });
    //注入服务
 app.controller(‘myCtrl‘,function($scope,mydata){
        $scope.name=mydata.name;
        $scope.age=mydata.age;
        $scope.phone=mydata.phone;
        $scope.fun=function(){
            return mydata.fun();
        }
    });
 </script>

　　运行结果

技术分享

　这是今天自己的学习笔记，分享给大家啦，有些地方不足希望大家多多提出，不知道大家有没有好的学习方法可以分享给我。。。

 

自定义服务 factory 和 service


联系
我们