当先锋百科网

首页 1 2 3 4 5 6 7

Angular.js（六）

$http服务详解：和ajax原理很像，写法类似

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$http','$timeout',function($scope,$http,$timeout){
	var timer = null;         
	$scope.data = [];
	$scope.change = function(name){
		$timeout.cancel(timer);    // 清除相关的定时器
		timer = $timerout(function(){   // 500毫秒后开启定时器
			$http({
				method : 'JSONP',  // 采用jsonp的方式
				url : 'http://..........?wd = '+ name + '&cb=JSON_CALLBACK'   // 数据传输的地址
			}).success(function(data){
				$scope.name = data.s  // 返回值在data.s下面
			}).error(function(err){
				console.log(err);
			});
		},500);
	}		
}])

<body ng-controller="A">
	<input type="text" ng-model="name" ng-keyup="change(name)">  // 键盘抬起时 触发事件
	<input type="button" value="搜索" ng-click = 'change(name)'> // 点击搜索的时 触发事件
	<ul>
		<li ng-repeat="list in data">{{ list }}</li>
	</ul>
</body>
$location ：对原生JS中的location进行封装处理

hash（），path（），search（）既可以获取值，也能设置值

port（端口号），host（主机名），protocol（协议）只能获取，不能设置值

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$location',function($scope,$location){
	// 输出的地址是地址栏中编码后的地址，当地址栏中的地址发生改变时，控制台会得到一个编码后的网址
	//var a = $location.absUrl(); 
	//$location.hash('hello');    // 设置哈希值
	//var a = $location.hash();   // 输出的就是设置的哈希值
	//$location.path('aaa');      // 设置路径，后退可以查看到以前的路径，有利于做路由操作，可以查看历史记录
	//$location.path('aaa').replace(); // 清除之前的路径，后退查看不到以前的路径（一般用不上） 
	//var a = $location.path();
	//$location.search({'age':10}); // 在地址栏中设置信息
	//var a = $location.search();   // 输出的就是年龄信息
	console.log(a)	;
}])
$anchorScroll：锚点跳转 

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$anchorScroll','$location',function($scope,$anchorScroll,$location){
	$scope.data = ['1','2','3','4','5','6'];
	$scope.change = function(id){
		$location.hash(id);
		// $anchorScroll();   // 解决在同一的锚点不能跳转的问题,手动跳转
	}
}])

<div ng-controller="A" class="box">
	<ul>
		<li ng-repeat="id in data" ng-click = "change('div'+id)">{{id}}0000000000000</li> // 把id传给change
	</ul>
	<div ng-repeat="id in data" ng-attr-id="div{{id}}">div{{id}}</div>
</div>

$cacheFactory ：缓存操作

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$cacheFactory',function($scope,$cacheFactory){
	var cache = $cacheFactory('myCache',{capacity:2});   // 限制缓存的条数，如果数据多余两条，只会留下最后两条数据
	cache.put('name','hello');   // cache.put 添加数据
	cache.put('age','20');
	cache.put('sex','男');
	console.log(cache.info());  // 打印数据包括 id capacity size(代表有几条数据)
	console.log(cache.get('sex'));  // 获取信息
	cache.remove('age');   //移出信息
	console.log(cache.info());
}])

$log的用法

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$log',function($scope,$log){
	$log.log('hello');     // 与console.log用法一样
	$log.error('hello');   // 报错
	$log.warn('hello');    // 警告
	$log.info('hello');    // 信息
}])

$log的供应商

var m1 = angular.module('myApp',[]);
m1.config(['$logProvider',function($logProvider){
	$logProvider.debugEnabled(true);    // 当为true时，$log.debug可以显示提示信息，当为false时，$log.debug不会显示提示信息

}]);
m1.controller('A',['$scope','$log',function($scope,$log){
	$log.debug('hello');
}]);

$interpolate ：插值服务

在textarea中输入{{name}}时，输出的是input中的value值 也就是name所对应的属性值，案例：

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$interpolate',function($scope,$interpolate){
	$scope.$watch('area',function(newVal){
		if(newVal){
			var temp = $interpolate(newVal);
			$scope.showText = temp({name:$scope.name})
		}
	})
}])

<div ng-controller="A" class="box">
	<input type="text" ng-model="name">
	<textarea ng-model="area">
	</textarea>
	<p>{{showText}}</p>
</div>
$q ：就是promise的实现方式，也就是对异步操作进行功能扩展

$q.defer().resolve：成功

$q.defer().reject：失败

$q.defer().notify：通知

then()：监听（成功或者失败）

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope','$q',function($scope,$q){
	var a = $q.defer()  // 创建了一个延迟对象
	function show(){
		setTimeout(function(){    // 开启一个定时器
			a.reject();       // 让这个延迟失败
		},2000)
		return a.promise;
	}
	show().then(function(){           // 监听看返回的是成功还是失败  
		alert('success');         // 成功弹出 success
	},function(){
		alert('fail');            // 失败弹出 fail
	})	
}])

Provider：供应商（服务的相关初始配置操作，大多数服务都有供应商）

改变差值的初始化配置

var m1 = angular.module('myApp',[]);
m1.config(['$interpolateProvider',function($interpolateProvider){
	$interpolateProvider.startSymbol('@@');  // 改变头部的符号
	$interpolateProvider.endSymbol('@@')     // 改变尾部的符号

}]);
m1.controller('A',['$scope','$interpolate',function($scope,$interpolate){
	$scope.name = "hello";
}]);

<div ng-controller="A">
	<p>@@name@@</p>    // 只有当@@ name @@ ，才会被输出
</div>
$anchorScrollProvider：自动跳转服务的供应商

例如上面的锚点链接跳转的例子，如果对$anchorScrollProvider进行初始化配置，如下代码，就不会完成锚点链接跳转，除非在controller服务中，手动跳转（红色字）

var m1 = angular.module('myApp',[]);
m1.config(['$anchorScrollProvider',function($anchorScrollProvider){
	$anchorScrollProvider.disableAutoScrolling();    // 禁止自动跳转
}]);