<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>serviceAndDefinitService</title> </head> <body> <!--1:--> <div ng-app="myModule" ng-controller="ctrl"> {{title}}<button ng-click="changeTitle()">change title</button> <button >change by jQuery</button> </div>
<!--2:--> <div ng-app="module2" ng-controller="Ctrl2"> {{name}} {{num}} </div>
<!--4:--> <div ng-app="module3" ng-controller="Ctrl3"> <div ng-bind="name"></div> <div ng-bind-html="name"></div> </div>
<!--5:--> <div ng-app="module5"> <div ng-controller="Ctrl5"></div> </div>
<!--6:-->
<table ng-app="module6" ng-controller="Ctrl6" border="1" width="400px" ng-cloak> <tr> <th>name</th> <th>age</th> </tr> <tr ng-repeat="v in data"> <td>{{v.name}}</td> <td>{{v.age}}</td> </tr> </table> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript"> /*Angular.js之服务与自定义服务(服务:可以在多个应用场景下复用的代码片段) 1:$scope.$apply()//在使用非$scope方法时需要调用angular.js的底层$apply()方法使$scope数据自动更新到view; 2:$timeout与$interval服务,$timeout.cancel()取消延时器服务 3:$window服务 4:$sce服务安全的处理html数据,$trustAsHtml,view中需要加ng-bind-html属性; 5:$cacheFactory缓存服务 6:$http服务获取后台数据/$http服务缓存操作/$http服务简写操作/$http服务后台接收post数据 7:使用factory自定义服务/多个控制器共享服务数据的处理 8:使用service创建自定义服务*/ /*1:$scope.$apply()*/ var m=angular.module('myModule',[]); m.controller('ctrl',['$scope',function($scope){ $scope.title='puDong shop'; //使用绑定到$scope上的方法更改$scope上的数据会自动更新视图 $scope.changeTitle=function(){ $scope.title='www.pudong.net'; }; //通过jQuery更改$scope数据时需要调用$apply()方法才能更新视图 $('#btn').click(function(){ $scope.title='www.pudong.com'; $scope.$apply(); }); }])
/*2:$timeout与$interval服务*/ var module2=angular.module('module2',[]); module2.controller('Ctrl2','$interval',function ($scope,$interval) { $scope.name="puDong store"; $scope.num=1; $interval(function(){ $scope.num++; },1000); }]) /*4:$sce服务安全的处理html数据,ng-bind-html;*/ var module3=angular.module('module3',[]); module3.controller('Ctrl3','$sce',$sce) { $scope.name=$sce.trustAsHtml('<h1>This is URL of The puDong store !</h1>'); }])
/*5:$cacheFactory缓存服务*/ var module5=angular.module('module5',[]); module5.controller('Ctrl5','$cacheFactory',$cacheFactory) { //创建缓存容器,指定容器名称 var obj=$cacheFactory('module5Mall'); //写入缓存数据 obj.put('title','puDong Store'); obj.put('data',{'url':'http://www.pudong.com'}); console.log(obj.get('title'));//puDong Store console.log(obj.get('data').url);//http://www.pudong.com //删除数据 obj.remove('title'); obj.removeAll(); //销毁容器 obj.destroy(); }])
/*6:$http服务获取后台数据*/ var module6=angular.module('module6',[]); module6.controller('Ctrl6','$http',$http) { $http({ method:'get', url:'http://localhost/ajax.php', cache:true//$http服务缓存是使用$cacheFactory服务,只需要配置参数cache为true即可,当我们异步请求有个页面多次的时候,第一次的请求结果被缓存到页面中,后面的请求就不再发生,直接使用第一次的请求结果, }).then(function(response){ $scope.data=response.data; },function(err){console.log(err);}) //$http服务的简写:$http.get/post('',{}).then(function(){},function(){})第一个参数指定url,第二个参数指定其他配置选项 $http.get('http://localhost/ajax.php',{ cache:true }).then(function(){},function(){}) }])
/*7:使用factory自定义服务/service自定义服务:service and factory的区别:factory时普通function,而service是一个构造器(constructor),Angular在调用service时会用new关键字,而调用factory时只是调用普通的function*/ var module6=angular.module('module6',[]); //使用factory自定义服务 module6.factory('factoryService',['$http',function($http){ return { get:function(){ return $http({url:'http://localhost/ajax.php'}); } } }]) //使用service自定义服务 module6.service('factoryService',function($http){ this.get=function(){ return $http({ method:'GET', url:'http://localhost/ajax.php', }).then(function(response){return response.data;},function(erro){return erro;}) } }]); module6.controller('Ctrl6','factoryService',factoryService) { factoryService.get().then(function(response){ $scope.data=response.data; }) }]) </script> </body> </html> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|