AngularJS——第8章 服务

第8章 服务

服务是一个对象或函数，对外提供特定的功能。

8.1 内建服务

1. $location是对原生Javascript中location对象属性和方法的封装。

  // $location内置服务
  // AngularJS 专门提供了一个帮你获URL地址一个服务
  App.controller('DemoController', ['$scope', '$location', function($scope, $location) {
    $scope.title = '学习$location服务';
	// $location就是angularJS提前封装好的
	// 提供获取地址相关信息的服务
	// console.log($location);
	//绝对路径
	$scope.absUrl = $location.absUrl();
	//相对路径
	$scope.url = $location.url();
	//主页
	$scope.host = $location.host();
	//查询字符串
	$scope.search = $location.search();
	//哈希值
	$scope.hash = $location.hash();
    //协议
	$scope.protocol = $location.protocol();
    //端口
	$scope.port = $location.port();
  }]);

2. $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

//注入声明依赖
App.controller('DemoController', ['$scope', '$timeout', '$intervall', function($scope, $timeout, $interval){
    $timeout(function(){
		$scope.time = new Date();
	}, 2000);

	$interval(function(){
		$scope.time = new Date();
	}, 1000);
}]);

3. $filter在控制器中格式化数据。

//使用过滤器服务
App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
	//原始信息
	$scope.content = 'my name is angular';
	//创建过滤器
	var uppercase = $filter('uppercase');
	//格式化数据
	$scope.content = uppercase($scope.content);
}]);

4. $log打印调试信息

//使用日志服务
App.controller('DemoController', ['$scope', '$log', function(){
	$log.log('日志');
	$log.info('信息');
	$log.warn('警告');
	$log.error('错误');
	$log.debug('调试');
}]);

5. $http用于向服务端发起异步请求

//使用$http服务
App.controller('DemoController', ['$scope', '$http', '$log', function ($scope, $http, $log) {
	//发起异步请求
	$http({
		method: 'post',  //请求方式
		url: 'example.php',  //请求地址
		data: {name: 'angular', age: 10},  //请求主体
		headers: {  //请求头信息
			'Content-Type': 'application/x-www-form-urlencoded'
		},
	}).success(function (data, states, headers, config) {
		//success code
	}).error(function(data, states, headers, config){});
		//失败回调
}]);

• 同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。
• 注：各参数含义见代码注释。

8.2 自定义服务

通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

1. factory方法

//自定义服务显示日期
App.factory('showTime', ['$filter', function($filter){
	var now = new Date();
	now = $filter('date')(now, 'yyyy/MM/dd');
	return now;
}]);
//声明依赖调用服务
App.controller('DemoController', ['$scope','showTime', function($scope, showTime){
	$scope.now = showTime;
}]);

2. service方法

//自定义服务显示日期
App.service('showTime', ['$filter', function($filter){
	var now = new Date();
	this.now = $filter('date')(now, 'yyyy/MM/dd');
	return now;
}]);
//声明依赖调用服务
App.controller('DemoController', ['$scope','showTime', function($scope, showTime){
	$scope.now = showTime;
}]);

3. value方法定义常量

//自定义常量服务
App.value('author', 'angular');

//声明依赖调用服务
App.controller('DemoController', ['$scope', 'author', function($scope, auther){
	$scope.author = author;
}]);

• 在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。