angularjs应用骨架(4)

　　继续上一篇 继续了解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 ]
View Code

 

　　我们可以像下面这样编写查询代码：

　　

 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 }());
View Code

 

　　然后在模版中这样使用它:

　　

 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>
View Code

 

　　在之后的连载中，我们在详细聊聊这种结构以及$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>
View Code

　　

　　脚本：

　　

 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     });
View Code

　　

　　效果图：

　　

 在以后的连载中，将会详细聊聊$http、$directive。

　　

　　

posted @ 2015-07-15 22:38  徐大腿  阅读(771)  评论(0)  编辑  收藏  举报