AngularJS-常用服务

  1. 云栖社区>
  2. 博客>
  3. 正文

AngularJS-常用服务

yichudu 2015-04-09 14:16:00 浏览1087
展开阅读全文

Angular 内置了很多服务,例如$location服务,用来和浏览器的地址栏进行交互;$root服务,用来根据URL地址的变换切换视图;还有$http服务,用来和服务器进行交互。

 $routeProvider

使用 $routeProvider绑定路由与视图。

我们可以利用路由服务定义这样一种东西:对于浏览器所指向的特定URL,Angular将会加载并显示一个模板,并实例化一个控制器来为模板提供内容。

切换视图的原理:Angular发起下图的请求:


XHR:SmlHttpRequest,本质是Ajax。

注意URL的变化,是在'#'后面的,这个是HTML标准的页内标签,Angular通过这个标准实现了路由子页面这一自己的目的。


$http

$http.get(url) : get方式获取url返回。

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="customersController"> 


<h3>  得到的JSON数据 </h3>
<br>
<table class="table table-striped">
  <thead>
    <tr>
      <th>名</th>
      <th>城市</th>
      <th>国家</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in names">

      <td>{{ x.Name }}</td>
 <td>{{ x.City}}</td>
      <td>{{ x.Country }}</td>
    </tr>
  </tbody>
</table>

</div>

<script>
function customersController($scope,$http) {
  $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")//这个http请求会拿到纯文本返回,里面是json内容。
  .success(function(response) {$scope.names = response;});//response就是json格式的数据,相当于把json反序列化为了js对象。
}
</script>

<script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>

</body>
</html>
			

$http拿到的json内容见下:

[ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "City" : "Graz", "Country" : "Austria" }, { "Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid", "Country" : "Spain" }, { "Name" : "Galería del gastrónomo", "City" : "Barcelona", "Country" : "Spain" }, { "Name" : "Island Trading", "City" : "Cowes", "Country" : "UK" }, { "Name" : "Königlich Essen", "City" : "Brandenburg", "Country" : "Germany" }, { "Name" : "Laughing Bacchus Wine Cellars", "City" : "Vancouver", "Country" : "Canada" }, { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy" }, { "Name" : "North/South", "City" : "London", "Country" : "UK" }, { "Name" : "Paris spécialités", "City" : "Paris", "Country" : "France" }, { "Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque", "Country" : "USA" }, { "Name" : "Simons bistro", "City" : "København", "Country" : "Denmark" }, { "Name" : "The Big Cheese", "City" : "Portland", "Country" : "USA" }, { "Name" : "Vaffeljernet", "City" : "Århus", "Country" : "Denmark" }, { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" } ]

网页效果

$http.jsonp()

用于get请求跨域访问获得json。
一个实例:
$http.jsonp(
	"http://115.28.88.165/ws/qing/timeSpan"+ "?callback=JSON_CALLBACK").success(
	function(data) {
		$scope.timeSpan = data;
	}).error(function(data) {
		console.log(data);
});
JSON_CALLBACK会被框架处理,如变成“angular.callbacks._0”。
期望返回报文的Content-Type应该是application/x-javascript;内容应该是angular.callbacks._0({"name":"xiaoMing"}); 。这样的话,data就是框架处理后的json。

$http.post()

post方式发起http请求。此时请求的Content-Type默认为  application/json;charset=UTF-8 。
var postData={"name":"xiaoHong","age":"13","book":{"name":"Physics"}};
	$http.post("http://localhost:8080/WebService/student/post",postData).success(function(data) {
		//$scope.receivedData = data;
		console.log("hehe");
		console.log(data);
	}).error(function(data) {
		console.log(data);
	});

$http.get()与$http.post()都是有回调的,需要的时候可以加上。

$interval(定时器)

$interval(fn, delay, [count], [invokeApply]);
说明: fn是函数,delay是定时器的间隔,单位是毫秒。count为可选参数,表明,执行多少次后停止。
invokeApply:bool类型,If set to false skips model dirty checking, otherwise will invoke fn within the $apply block。

$q与promise(异步执行结果)

详见其他文章  http://my.oschina.net/ilivebox/blog/293771
var deferred=$q.defer();
var promise=deferred.promise;//promise用来描述异步执行结果
if(/*成功执行*/){
	deferred.resolve();//表示成功执行
}else{
	deferred.reject();//没有成功执行
}
promise.then(/*do something*/);//成功执行后调用
promise.then(/*do other thing*/);//这是第二个then,执行失败后调用
/*也可以链式写promise.then(/*do something*/).then(/*do other thing*/);*/
解决多个ajax请求之间的依赖,除了用回调,还可以用promise。
// 展示爬虫系统的下一个url并解析此url
$scope.nextDisplay = function() {
	$scope.getNextUrl().then(function success(data) {
		$scope.urlService($scope.nextUrl)
	});
}
//拿到爬虫系统的下一个url					
$scope.getNextUrl = function() {
	var promise = $http
			.get(
					"/GraduationProjectCollect/webService/spiderService/nextUrl")
			.success(function(data) {
				$scope.nextUrl = data;//我们的目的是 这一句执行后再执行$scope.urlService($scope.nextUrl)函数
			}).error(function(data) {
				alert("获取爬虫系统地nextUrl失败");
				console.log(data);
			});
	return promise;
}



网友评论

登录后评论
0/500
评论