通过AngularJs自定义服务实现代码共用实例:
html部分:
02 | <div ng-controller="ctr2"> |
03 | <table cellpadding="0" cellspacing="0"> |
11 | <tr ng-repeat="(key, value) in data.data"> |
12 | <td>{{value.webname}}</td> |
13 | <td>{{value.weburl}}</td> |
17 | <button ng-click="deleteAll();">删除所有数据</button> |
|
JavaScript部分:
01 | <script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script> |
02 | <script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script> |
03 | <script type="text/javascript"> |
04 | var m = angular.module('app', []); |
05 | m.factory('zymBlog', ['$http', function($http){ |
07 | 'arryData' : {'data': []}, |
13 | }).then(function(result){ |
14 | _this.arryData.data = result.data; |
15 | return _this.arryData; |
18 | 'removeAll' : function(){ |
20 | _this.arryData.data = []; |
24 | m.controller('ctr2', ['$scope', 'zymBlog', function($scope, zymBlog){ |
25 | zymBlog.get().then(function(result){ |
28 | $scope.deleteAll = function(){ |
|
PHP部分:
2 | header('Content-type:text/html;charset="utf-8"'); |
9 | echo json_encode($arry); |
|
以上代码实现的效果是通过自定义服务从后台获取数据,然后控制器中调用数据显示在html代码中。
如果自定义服务中的代码需要多个地方调用,按照之前的方法,统统写在控制器里边,那就是有多少个地方需要调用,就得有多少个控制器,然后代码就得写多少次,太繁琐了,而且后期维护成本太大。
如果把公用的代码写在服务里边,把这个服务单独做成一个js文件,我们只需要在需要调用这个数据的页面调用这个js文件就行,这就省下来好多的麻烦。
点击【删除所有数据】的按钮,实际上是清空了$scope.data引用的那个对象的data属性,这里涉及到对象的传址问题,具体可参考文章《JavaScript中传值与传址的概念解析》。