学习笔记-AngularJs（四）
之前學習的事視圖與模版，我們在控制器文件中直接定義一個數組，讓其在模版文件中用ng-repeat指令構造一個迭代器，定義的數組http://t.cn/RUbL4rP如同以下：
$scope.phones = [{'name':'xioabin','number':'18824863682','age':'12'},{'name':'xioalong','number':'18824863683','age':'19'},{'name':'xiaohua','number':'18824863684','age':'5'},{'name':'xiaoMING','number':'18824863685','age':'1'},{'name':'xiaoTU','number':'18824863686','age':'2'},{'name':'xiaoKE','number':'18824863687','age':'40'},];這種形式往往不是我們所要的，我們通常會使用常用ajax技術去獲取數據，在angular也有類似的服務來實現XHR，那就是 $http，使用怎么一個服務，需要將代碼放置在本地服務器或是web站點上，首先先準備phone.json文件，如下：
[{"name":"xioabin","number":"18824863682","age":"12"},{"name":"xioalong","number":"18824863683","age":"19"},{"name":"xiaohua","number":"18824863684","age":"5"},{"name":"xiaoMING","number":"18824863685","age":"1"},{"name":"xiaoTU","number":"18824863686","age":"2"},{"name":"xiaodfs","number":"18824863687","age":"46"},{"name":"xiaodfE","number":"18824863682","age":"46"},{"name":"xiaobh","number":"18824863680","age":"48"},{"name":"xiaogg","number":"18824863687","age":"10"},{"name":"xiaouu","number":"18824863686","age":"20"},{"name":"xiaoKds","number":"18824863682","age":"30"},{"name":"xiaoKEdad","number":"18824863689","age":"60"},{"name":"xiaoKb","number":"18824863683","age":"90"},{"name":"xiaofa","number":"18824863685","age":"17"}]內容可以自己設置，模版文件代碼與之前大同小異：
<!doctype html><html ng-app ng-controller="PhoneListCtrl"><head><meta charset='utf8' /><title ng-bind="'Google Phone Gallery:' query"></title> <!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> --><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script src="script.js"></script></head><body><div class="example2">Select: <select name="select" id="select" ng-model='order'><option value="name">名字</option><option value="age">年齡</option></select> Search: <input name="search" type="text" ng-model='query' /><ul><!--迭代器--><li><span>序號</span> <span>姓名</span> <span>號碼</span> <span>年齡</span></li><li ng-repeat='phone in phones | filter:query | orderBy:order'><span>{{$index 1}}</span> <span>{{phone.name}}</span> <span>{{phone.number}}</span> <span>{{phone.age}}</span></li></ul></div></body></html>不同的就是控制器文件的不同，如下：
//注入服務$http function PhoneListCtrl($scope,$http){$http.get("phone.json").success(function(data, status, headers, config) {if(status==200){ $scope.phones = data; }console.log(status "," headers "," config);// alert(JSON.stringify(data)); });$scope.order = 'name'; }這里傳入了一個$http，那么我們就可以通過$http.get(路徑).success(function(data,status){/*成功獲取數據，之后該干嘛？*/})，data是返回的數據，status是狀態碼，header和config可以打印出來看一下，應該是一些配置和頭部吧！這樣$scope.phones就與之前一樣是一個數組了！
官網的$http是這樣的形式，可以參考著寫：
$http({ url:'...',method:'...',data:'...',params:'...',cache:'...'}).success(function(){....}).error(function() {.....});如果我們的控制器按上面那樣寫的話，在壓縮代碼時候會出錯，那么有這兩種方法可以解決這個問題：
為了克服壓縮引起的問題，只要在控制器函數里面給$inject屬性賦值一個依賴服務標識符的數組，就像被注釋掉那段最后一行那樣：
PhoneListCtrl.$inject = ['$scope', '$http'];
另一種方法也可以用來指定依賴列表并且避免壓縮問題——使用Javascript數組方式構造控制器：把要注入的服務放到一個字符串數組（代表依賴的名字）里，數組最后一個元素是控制器的方法函數：
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
這就是angularjs的依賴注入了！當控制器構造的時候，AngularJS的依賴注入器會將這些服務注入到你的控制器中。當然，依賴注入器也會處理所需服務可能存在的任何傳遞性依賴（一個服務通常會依賴于其他的服務）。
注意不要使用‘$’前綴來命名你自己的服務和模型（就是自己可以定義自己的服務，像$http），否則可能會產生名字沖突。
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的学习笔记-AngularJs（四）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记-AngularJs（十）
- 下一篇： 径向菜单的制作