`
2008winstar
  • 浏览: 58087 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

使用JSON

阅读更多

本文内容来自《Pro AngularJS》,原文作者为Adam Freeman。

翻译过程中加入了译者的理解,并作了适当的筛减。

 

JavaScript对象表示法(JSON)已成了Web应用中实际使用的数据格式。JSON非常简单且容易在JavaScript代码中使用,这使它非常流行。JSON支持一些简单的数据类型,这些数据类型能在JavaScript找到与之对应:Number,String,Boolean,Array,Object以及特殊的类型null。

 

在此提醒一下,下面是todo.json文件的内容,它包含的就是简单的JSON串:

[
	{
		"action": "Buy Flowers", 
		"done": false
	},
	{
		"action": "Get Shoes", 
		"done": false
	},
	{
		"action": "Collect Tickets", 
		"done": true
	},
	{
		"action": "Call Joe", 
		"done": false
	}
]

 

JSON数据看起来与JavaScript中数组和对象的字面量声明有几分类似。唯一的不同就是对象的属性名必须使用双引号(译者注:应该还是有其它差别的)。

 

AngularJS中可以很方便的使用JSON。当你通过Ajax请求JSON数据时,返回的数据会自动被解析为JavaScript对象并且传到成功的回调函数中,如前面使用$http.get方法获取服务端的一个JSON文件所演示的那样。

 

AngularJS提供了两个限行地对JSON进行编码和解码的方法:angular.fromJson和angular.toJson。具体演示如下:

<!DOCTYPE html>
<html ng-app="demo">
	<head>
		<meta charset="utf-8">
		<title>Example</title>
		<link rel="stylesheet" href="boostrap3/css/bootstrap.min.css" />
	</head>
	<body ng-controller="demoCtrl">
		<div class="panel">
			<h1>To Do</h1>
			<table class="table table-striped">
				<tr>
					<td>Action</td>
					<td>Done</td>
				</tr>
				<tr ng-repeat="item in todos">
					<td>{{item.action}}</td>
					<td>{{item.done}}</td>
				</tr>
			</table>
		</div>		
		<script src="js/angular/angular.min.js"></script>
		<script>
			var myApp = angular.module('demo', []);
			
			myApp.controller('demoCtrl', ['$scope', '$http', function($scope, $http){
				$http.get('data/todo.json').success(function(data){
					var jsonString = angular.toJson(data);
					console.log(jsonString);
					$scope.todos = angular.fromJson(jsonString);
				});
			}])
		</script>
	</body>
</html>

 

在这个示例中,对传个promise成功回调函数的数据对象进行了处理。这个数据对象是以JSON的格式从后端获取的,然后AngularJS自动地将它解析成了JavaScript数组。然后,我使用angular.toJson方法又将这个数组编码成JSON格式并通过控制台输出。最后,使用前面得到的JSON数据并调用angular.fromJson方法创建了另一个JavaScript对象,并把这个对象提供给Angular控制器作为数据模型然后通过ng-repeat指令在table标签中渲染出来。

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics