继续上一篇 继续了解angular其他内容。
与服务器交互
真正的应用需要和真实的服务器进行交互移动应用和新兴的Chrome桌面应用可能是例外。但是对于此外的所有应用来说，无论是想把数据持久化到云端还是需要其他用户进行实时交互，都需要让应用与服务器进行交互。
为了实现这一点，angular提供了一种叫做$http的服务，它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式，它还包含了安全性支持，避免了JSON格式的脆弱性和跨站请求伪造（XSRF）。它让你可以轻松的转换请求和相应数据，甚至还实现了简单的缓存。例如，我们打算让购物站点从服务器上获取商品列表信息，而不是从内存假数据获取。例如我们已经写好了一个后台程序返回一段JSON格式数据：
[
{
"id":0,
"title":"羽毛球",
"description":"李宁羽毛球，耐磨，轻便",
"price":3.95
},
{
"id":1,
"title":"羽毛球拍",
"description":"李宁羽毛球拍N77二代，耐磨，轻便",
"price":1200
},
{
"id":2,
"title":"羽毛球谢",
"description":"尤尼克斯羽毛球鞋，耐磨，轻便",
"price":300
}
]
我们可以像下面这样编写查询代码：
!(function () {
var app=angular.module('myHttpModule',[]);
app.controller('shoppingController', function ($scope,$http) {
$http.get('data/data1.json').success(function (data,status,headers,config) {
$scope.Items=data;
}).error(function (e) {
alert(e)
});
});
}());
然后在模版中这样使用它:
<!DOCTYPE html>
<html ng-app="myHttpModule">
<head>
<meta charset="UTF-8">
<script src="static/js/angular.js" type="text/javascript"></script>
<script src="static/app/controller/controller.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="shoppingController">
<div ng-repeat="item in Items">
<p>{{item.title}}</p>
<p>{{item.description}}</p>
<p>{{item.price | currency}}</p>
</div>
</div>
</body>
</html>
在之后的连载中，我们在详细聊聊这种结构以及$http服务的各种功能。
使用指令修改DOM
指令扩展了HTML语法，同时也是使用自定义的元素和属性把行为和DOM转换关联到一起的方式。通过指令，你可以创建可服用的UI组件，配置你的应用，并且做到你能想象到的几乎所有的事情，这些事情都可以在你的模版中实现。
你可以使用angular内置的指令来编写应用，但是也有遇到自己编写指令的情况。当你想要以某种方式处理浏览器事件或者修改DOM，而这些东西又没有内置指令可以支持时，你就会知道是时候深入理解指令体系了，你编写的代码将会位于你所编写的指令中，而不是控制器、服务或应用的其他地方。
与服务一样，你可以通过模块来定义指令，只需要调用模块实例的directive()函数即可。
var app=angular.module('myApp',[]);
app.directive('name',directiveFunction);directiveFunction是一个指令工厂函数。
autofocus是一个很好用的html5属性，但是对于不支持html5的牛郎妻来说要怎么才能在页面一打开的情况下就自动获取焦点呢？好，那么我们就来实现这样一个指令ng-auto
模版页面：
<div ng-controller="autoFouceController">
<button ng-auto ng-click="clickMe()">
{{data.info}}
</button>
</div>
脚本：
app.controller('autoFouceController', function ($scope) {
var data = {
info: "hello,angular!"
};
$scope.data = data;
$scope.clickMe = function () {
$scope.data.info = "hello,world!";
};
});
app.directive('ngAuto', function () {
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
element[0].focus();
}
};
});
效果图：
在以后的连载中，将会详细聊聊$http、$directive。