继续上一篇 继续了解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。