AngularJS 中,服务是一个函数或对象,我们可以在控制器中或者其他模块注入使用。
AngularJs中内置了30多种服务,除了这些内置的服务外,我们也可以通过两种方式自定义服务(下面介绍)
常见的服务如下:
1.数据的脏检查服务$scope.$apply():
angular.js中如果通过$scope定义的变量在发生变化时,会触发视图模型中的变量会发生变化,并更新视图中的变量;通过原生js或者jQuery定义的变量的值在发生改变时,触发视图模型中变量改变,但并不会更新视图中变量,这是通过此服务可更新视图中的变量
var m=angular.module('la',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.name="张三";
$scope.fn=function(){
$scope.name="李四";
};
$('#btn2').click(function(){
$scope.name="王五";
});
$('#btn3').click(function(){
$scope.name="马六";
$scope.$apply(); //使用数据脏检查,更新视图页面
});
}]);
html部分
<div ng-app="la" ng-controller="ctrl">
<input type="text" ng-model="name"></input>
<button id="btn1" ng-click="fn()">按钮1</button> <!--点击按钮1时文本框内容改变-->
<button id="btn2">按钮2</button> <!--点击按钮2时文本框内容不变-->
<button id="btn3">按钮3</button> <!--改变-->
</div>
2.$timeout和$interval延迟和重复定时服务:
原生的JS方法setTimeout和setInterval不会及时触发页面更新,必须通过数据的脏检查,这时可以通过angular内置的服务
var m=angular.module('la',[]); m.controller('ctrl',['$scope','$timeout','$interval',function($scope,$timeout,$interval){
$scope.name="张三";
//将延迟器函数值赋值给一个变量,方便下面删除
var tim=$timeout(function(){ //和原生的JS使用方法相同,服务里第一个参数为函数,第二个为延迟的毫秒数 $scope.name="李四"; },2000); //$timeout.cancel(tim);删除延迟器
$scope.id=0; var id1=$interval(function(){ $scope.id++; if($scope.id>10){ $interval.cancel(id1); //达到一定值时删除重复定时服务 } },1000);
}]);
html部分
<div ng-app="la" ng-controller="ctrl"> <input type="text" ng-model="name"></input> {{id}} </div>
3.$window服务原生JS中window作用域下有很多属性和函数,angular.js 中这些属性和函数都可以通过$window服务调用,示例如下:
var m=angular.module('la',[]); m.controller('ctrl',['$scope','$window',function($scope,$window){ $scope.get=function(){ if($window.confirm('确定退出吗')){ $scope.message="你点击了确定"; }else{ $scope.message="你点击了取消"; } }; }]);
html部分
<div ng-app="la" ng-controller="ctrl"> {{message}} </div>
4.$sce安全服务的处理HTML数据当我们定义的数据里面含有html标签时,调用数据不能自动过滤html标签,这时可以用这个服务包裹变量,并在html使用ng-bind-html调用变量可过滤标签
var m=angular.module('la',[]); m.controller('ctrl',['$scope','$sce',function($scope,$sce){ $scope.data=$sce.trustAsHtml('<h1>啦啦啦啦</h1>'); //使用$sce.trustAsHtml()包裹数据 }]);
html部分
<div ng-app="la" ng-controller="ctrl"> <div ng-bind-html="data"></div> //使用ng-bind-html=""绑定变量 </div>
5.$http向服务器请求数据服务,等同于jQuery中的$.ajax(其他的请求服务不再介绍,类似)var m=angular.module('la',[]); m.controller('ctrl',['$scope','$http',function($scope,$http){ $http({ method:'POST', //发送的方式 url:'####', //请求的接口 data:{ //额外传递的数据 name:'张三', age:22, }, cache:true, //缓存服务,如果下面还有相同的请求服务将不再执行,直接使用缓存的数据 }).then(function(response){ //$http服务返回的是promise对象,then()函数可以直接操作这个对象,第一个参数函 数为成功时执行,第二个参数函数为失败时执行,函数的参数为成功或者失败时的返回数据 $scope.data=response.data; },function(response){ console.log(response); }); }]);
注:$http()发送的数据并不是json数据,所以后台必须将其接受后转换为json数据,或者在前端序列化,这里不做详细讲解
6.$cacheFactory缓存实例var m=angula.module('la',[]); m.controller('ctrl',['$scope','$cacheFactory',function($scope,$cacheFactory){ var obj=$cacheFactory('xian'); //使用一个页面缓存服务,定义名为xian,并赋值给obj //给容器中放入数据 obj.put('web',{name:'太傻',url:'123.html'}); obj.put('user',{name:'张三',url:'456.html'}); //从容器中取出数据 $scope.data=obj.get('web').name; //obj.remove('web');删除缓从数据 //obj.removeAll(); 删除所有的数据 //obj.destroy(); 销毁容器 }]); m.controller('ctrl',['$scope','$cacheFactory',function($scope,$cacheFactory){ var obj2=$cacheFactory.get('xian'); //获取上一个控制器中缓存的容器 $scope.data=obj2.get('web').name; }]);
7.创建服务:有两种方法
第一种:使用factory创建服务,其实就是说如果在多个地方都要使用到某个功能,例如多个地方都要使用请求到的数据,我们可以将这个请求封装成服务,减少代码量
第二种方法:使用service创建服务var m=angular.module('la',[]); //创建服务 m.factory('videoSever',['$http',function($http){ return { get:function(callback){ $http({url:'123.html'}).then(function(response){ callback(response); //并没有处理响应的数据,必须传递一个函数来处理返回的函数 }); }, all:function(){ $http({url:'123.html'}); //直接返回请求的对象 } } }]); //在控制器中调用使用服务 m.controller('ctrl',['$http','videoSever',function($http,videoSever){ videoSever.get(function(response){ $scope.data=response.data; }); videoSever.all().then(function(response){ $scope.data=response.data; }); }]);
这两种方法创建服务方法本质上相同var m=angular.module('la',[]); m.service('videoSever',['$http',function($http){ this.get=function(){ return $http({url:'123.html'}).then(function(response){ return response.data; //这里返回了具体数据,下面可以直接操作返回的数据 }); }; }]); m.controller('ctrl',['$scope','videoSever',function($scope.videoSever){ videoSever.get().then(functio(data){ $scope.data=data; }); }])
注:很多代码都是以前调试的,最近开始写博客就直接搬过来了,所以可能有错误,欢迎指正喽