Skip to content

Commit

Permalink
第二章 与服务器对话小节译完
Browse files Browse the repository at this point in the history
basecss committed Jun 1, 2013
1 parent 597dc23 commit 41f3468
Showing 9 changed files with 148 additions and 13 deletions.
53 changes: 53 additions & 0 deletions Chapter2.markdown
Original file line number Diff line number Diff line change
@@ -1144,3 +1144,56 @@ Angular自带了几个过滤器, 像我们已经看到的currency:
我们已经创建了一个带有多个视图的应用程序的基本结构. 我们通过改变URL来切换视图. 这意味着用户也能够使用前进和后退按钮进行工作. 用户可以在我们的应用程序中添加书签和邮件链接, 即使只有一个真正的HTML页面.

##对话服务器

好了, 闲话少说. 实际的应用程序通常与真正的服务器通讯. 移动应用和新兴的Chrome桌面应用程序可能有些例外, 但是对于其他的一切, 你是否希望它持久保存云端或者与用户实时交互, 你可能希望你的应用程序与服务器通信.

对于这一点Angular提供了一个名为`$http`的服务. 它有一个抽象的广泛的列表使得它能够很容易与服务器通信. 它支持普通的HTTP, JSONP以及CORS. 还包括防止JSON漏洞和XSRF的安全协议. 它让你很容易转换请求和数据响应, 甚至还实现了简单的缓存.

比方说, 我们希望从服务器检索购物站点的商品而不是我们的内存中模拟. 编写服务器的信息超出了本书的范围, 因此让我们想象一下我们已经创建了一个服务, 当你构造一个`/product`查询时, 它返回一个JSON形式的产品列表.

给定一个响应, 看起来像这样:

[
{
"id": 0,
"title": "Paint pots",
"description": "Pots full of paint",
"price": 3.95
},
{
"id": 1,
"title": "Polka dots",
"description": "Dots with that polka groove",
"price": 12.95
},
{
"id": 2,
"title": "Pebbles",
"description": "Just little rocks, really",
"price": 6.95
}
… etc …
]

我们可以这样编写查询:

function ShoppingController($scope, $http){
$http.get('/products').success(function(data, status, headers, config){
$scope.items = data;
});
}

然后像这样在模板中使用它:

<body ng-controller="ShoppingController">
<h1>Shop!<h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
</body>

正如我们之前所学习到的, 从长远来看我们将这项工作委托到服务器通信服务上可以跨控制器共享是明智的. 我们将在第5章来看这个结构和全方位的讨论`$http`函数.
6 changes: 2 additions & 4 deletions examples/Chapter2/aMail/README.markdown
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
###说明:

这个aMail实例并不能直接打开运行. 如文章中所介绍, 需要借助于服务器环境.

运行结果如下图所示.
这个aMail实例并不能直接在本地运行, 需要借助服务器环境. 其运行结果如下图所示:

+ 初始化

![list](figure1.png)
![init](figure1.png)

+ 邮件信息

10 changes: 5 additions & 5 deletions examples/Chapter2/aMail/detail.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div><strong>Subject:</strong> {{message.subject}}</div>
<div><strong>Sender:</strong> {{message.sender}}</div>
<div><strong>Date:</strong> {{message.date}}</div>
<div>
<div class="detail-item"><strong>Subject:</strong> {{message.subject}}</div>
<div class="detail-item"><strong>Sender:</strong> {{message.sender}}</div>
<div class="detail-item"><strong>Date:</strong> {{message.date}}</div>
<div class="detail-item">
<strong>To:</strong>
<span ng-repeat='recipient in message.recipients'>{{recipient}} </span>
</div>
<div>{{message.message}}</div>
<div class="detail-msg">{{message.message}}</div>
<a href='#/'>Back to message list</a>
31 changes: 30 additions & 1 deletion examples/Chapter2/aMail/index.html
Original file line number Diff line number Diff line change
@@ -3,9 +3,38 @@
<head>
<script src="../../js/angular.min.js"></script>
<script src='controllers.js'></script>
<title>邮件应用程序</title>
<style>
h1 {
background:#f3f3f3;
}
.view {
width: 720px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td, table th {
border: 1px solid #CCC;
padding: 5px;
line-height: 28px
}
.detail-item {
line-height: 28px;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.detail-msg {
line-height: 24px;
padding: 5px;
margin: 10px 0;
border: 1px dashed #CCC;
}
</style>
</head>
<body>
<h1>A-Mail</h1>
<div ng-view></div>
<div class="view" ng-view></div>
</body>
</html>
6 changes: 3 additions & 3 deletions examples/Chapter2/aMail/list.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<table>
<tr>
<td><strong>Sender</strong></td>
<td><strong>Subject</strong></td>
<td><strong>Date</strong></td>
<th><strong>Sender</strong></th>
<th><strong>Subject</strong></th>
<th><strong>Date</strong></th>
</tr>
<tr ng-repeat='message in messages'>
<td>{{message.sender}}</td>
5 changes: 5 additions & 0 deletions examples/Chapter2/talkToServer/README.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
###说明:

这个实例需要借助服务器环境运行, 实例中给出了一个简单的PHP返回JSON数据. 在应用程序的HTML页面中使用`$http()`函数发起对这个php文件的请求, 最后将根据响应的数据构建出如下图所示结果界面:

![$http](figure.png)
Binary file added examples/Chapter2/talkToServer/figure.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions examples/Chapter2/talkToServer/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>服务器通信</title>
<script src="../../js/angular.min.js"></script>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
table td {
border: 1px solid #ccc;
padding: 5px;
line-height: 26px;
}
</style>
</head>
<body ng-controller="ShoppingController">
<h1>Products</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
<script>
function ShoppingController($scope, $http){
$http.get('server.php').success(function(data, status, headers, config){
$scope.items = data;
});
}
</script>
</body>
</html>
14 changes: 14 additions & 0 deletions examples/Chapter2/talkToServer/server.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php

header('Cntent-type: text/json');

$items = array(
array('id' => 0, "title" => "Paint pots", "description" => "Pots full of paint", "price" => 3.95),
array("id" => 1, "title" => "Polka dots", "description" => "Dots with that polka groove", "price" => 12.95),
array("id" => 2, "title" => "Pebbles", "description" => "Just little rocks, really", "price" => 6.95)
);
$return = json_encode($items);

print_r($return) ;

?>

0 comments on commit 41f3468

Please sign in to comment.