AngularJS (10) $http.get 讀檔
有時候，你可能希望一些變數的數值或是文字資料能夠用匯入網頁的方式，方便隨時修改或更新資料，那麼$http.get()可以幫助你。
$http.get(檔名) 幫你讀取檔案到script內，不論是.txt 或是 .json。
實例
(Plunkr)
假設你今天想在網站上，秀出六位好友的名單。
- Lily
- Ihc
- Suisui2
- Suisui
- Piggu
- Chhueh
你可以把他們的名字直接寫成一個陣列，但以後就得不斷到此更新朋友名單，並不是很方便。所以，乾脆把他們的名字存成一個文字檔吧！
朋友名單.txt
Lily Ihc Suisui2 Suisui Piggu Chhueh
index.html
我們先決定一下要怎麼呈現朋友名單，那......直接印出來吧！同時也宣告ng-app和ng-controller。
<body ng-app="app1">
<div ng-controller="NameController">
<p ng-repeat="name in list">{{name}}</p>
</div>
</body>
list 是控制器NameController的陣列變數，用來儲存朋友名字。
JS
我們在控制器用$http.get(...)讀出一個個名字，並丟進變數list中，才能讓index.html正常顯示朋友名字。
var app = angular.module("app1",[]);
app.controller('NameController', ['$scope', '$http', function($scope, $http) {
$scope.list = [];
$http.get('朋友名單.txt').success(function(data){
angular.forEach(data.split('\n'), function(name, ind){
$scope.list.push(name);
});
});//end $http
}]);
JS 解釋
首先，當然先寫好基本的angularjs module定義。
var app = angular.module("app1",[]);
接著寫好我們在index.html要用的控制器，NameController，並且將list初始為空的陣列變數。
app.controller('NameController', ['$scope', '$http', function($scope, $http) {
$scope.list = [];
//...
}]);
注意到中間的"$http"嗎？因為$http.get()屬於angularjs提供的$http 服務，我們必須匯入"$http" 服務給控制器使用。
重頭戲來了！ $scope.list = []; 的下一行要加上底下這段$http.get()
$http.get('朋友名單.txt').success(function(data){
angular.forEach(data.split('\n'), function(name, ind){
$scope.list.push(name);
});
});//end $http
$http.get().success(...)
是指讀檔成功之後要幹嘛？因為我們取到資料之後要把文字檔存到list，所以在.success(...)裡面寫function。
function(data)
data是.success提供的有全部檔案內容的參數。
Lily Ihc Suisui2 Suisui Piggu Chhueh所以，data=
Lily\n Ihc\n Suisui2\n Suisui\n Piggu\n Chhueh\ndata.split('\n')=
["Lily", "Ihc", "Suisui2", "Suisui", "Piggu", "Chhueh"]
切割出一個個名字字串後，然後呢~
angular.forEach(data.split('\n'), function(name, ind){
$scope.list.push(name);
});
angular.forEach(data.split('\n'))，類似jquery.each()，依序取出陣列元素。我們再把取出的data元素，push()到list內。
完成
Lily
Ihc
Suisui2
Suisui
Piggu
Chhueh
留言
張貼留言