AngularJS XHRs & Dependency Injection


看到這個覺得很開心,因為用XHRs & Dependency Injection可以很輕易的把json資料讀到html裡面了,首先html用上一個範例的。

  1. <div ng-controller="PhoneListCtrl">  
  2.         Search: <input ng-model="query">  
  3.         Sort by:   
  4.         <select ng-model="orderProp">  
  5.           <option value="name">Alphabetical</option>  
  6.           <option value="age">Newest</option>  
  7.         </select>  
  8.       <div class="phone_lists">  
  9.         <ul class="phones">  
  10.           <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">  
  11.             {{phone.name}}   
  12.             <p>{{phone.snippet}}</p>  
  13.           </li>  
  14.         </ul>  
  15.       </div>  
  16.   </div>  

然後準備一個像這樣的json檔,取名phones.json
  1. [   
  2. {   
  3. "age": 13,   
  4. "id""motorola-defy-with-motoblur",   
  5. "name""Motorola DEFY\u2122 with MOTOBLUR\u2122",   
  6. "snippet""Are you ready for everything life throws your way?"  
  7. ...   
  8. },   
  9. ...   
  10. ]  

在controller寫這樣的code就可以了
  1. function PhoneListCtrl($scope, $http) {   
  2.     $http.get('phones/phones.json').success(function(data) {   
  3.     $scope.phones = data;   
  4. });   
  5.     
  6.     $scope.orderProp = 'age';   
  7. }  

$http會向server發出一個HTTP GET的請求,再取回json格式的內容,這個是為了簡單用單純的json檔,一般會從server端產出json格式的檔案,不見得是.json檔。

然後像這樣就可以把資料讀出來了,比用jquery方便很多。
  1. function PhoneListCtrl($scope, $http) {...}  

如果只想取得前面幾筆的資料,只要像這樣寫就可以
  1. $scope.phones = data.splice(0, 5);  

Demo

來源
XHRs & Dependency Injection
AngularJS入门教程05:XHR和依赖注入

留言