angular.js之常见的服务（service）篇

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创建服务，其实就是说如果在多个地方都要使用到某个功能，例如多个地方都要使用请求到的数据，我们可以将这个请求封装成服务，减少代码量


	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;
		});
	}]);
第二种方法：使用service创建服务
	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;
		});
	}])
这两种方法创建服务方法本质上相同





注：很多代码都是以前调试的，最近开始写博客就直接搬过来了，所以可能有错误，欢迎指正喽

最后

以上就是野性美女为你收集整理的angular.js之常见的服务（service）篇的全部内容，希望文章能够帮你解决angular.js之常见的服务（service）篇所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。