AngularJS XHRs & Dependency Injection

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

view plaincopy to clipboardprint

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

view plaincopy to clipboardprint

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就可以了

view plaincopy to clipboardprint

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方便很多。

view plaincopy to clipboardprint

1. function PhoneListCtrl($scope, $http) {...}  

如果只想取得前面幾筆的資料，只要像這樣寫就可以

view plaincopy to clipboardprint

1. $scope.phones = data.splice(0, 5);  

Demo

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