自定义服务 factory 和 service

最新推荐文章于 2021-02-19 20:44:03 发布

aa410914955

最新推荐文章于 2021-02-19 20:44:03 发布

阅读量187

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xiaohanh/p/6906058.html

版权

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={
            'name':'Tom',
            'age':18,
            'phone':'1234678901'
          }
        return data;
        //返回一个函数
    }).factory('$myFun', function(){
        return {
            str:function(text){
                  return "自定义服务"+ text;
            }
        }
        //返回一个数组
    }).factory('$myArray',function(){
        return ['1','12','123'];
    });
      //控制器层  注入服务
      app.controller('myCtrl',['$scope','$outData','$myFun','$myArray',function($scope,$outData,$myFun,$myArray){
            $scope.data=$outData;
            $scope.strfun=function(text){
                return $myFun.str(text);
            }
            $scope.array=function(i){
                return $myArray[i];
            }
      }]);
</script>

　　运行结果

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>

　　运行结果

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

转载于:https://www.cnblogs.com/xiaohanh/p/6906058.html

aa410914955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义服务 factory 和 service

1、使用factory 方法必须有返回值即return ，factory只是调用普通的function，可以返回任何东西。HTML 代码<body ng-app="myApp"> <div ng-controller="myCtrl"> <ul> <li>{{data.name}}&...
复制链接

扫一扫