angularjs應用骨架(4)

時間 2019-12-15

原文原文鏈接

　　繼續上一篇繼續瞭解angular其餘內容。javascript

　與服務器交互

　　真正的應用須要和真實的服務器進行交互移動應用和新興的Chrome桌面應用多是例外。可是對於此外的全部應用來講，不管是想把數據持久化到雲端仍是須要其餘用戶進行實時交互，都須要讓應用與服務器進行交互。html

　　爲了實現這一點，angular提供了一種叫作$http的服務，它提供了一個可擴展的抽象方法列表，使得與服務器的交互更加容易。它支持HTTP、JSONP和CORS方式，它還包含了安全性支持，避免了JSON格式的脆弱性和跨站請求僞造（XSRF）。它讓你能夠輕鬆的轉換請求和相應數據，甚至還實現了簡單的緩存。例如，咱們打算讓購物站點從服務器上獲取商品列表信息，而不是從內存假數據獲取。例如咱們已經寫好了一個後臺程序返回一段JSON格式數據：html5

 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

　　咱們能夠像下面這樣編寫查詢代碼：java

 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

　　而後在模版中這樣使用它:json

 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

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