angularjs应用骨架(4)

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