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