AngularJS (10) $http.get 讀檔

有時候,你可能希望一些變數的數值或是文字資料能夠用匯入網頁的方式,方便隨時修改或更新資料,那麼$http.get()可以幫助你。

$http.get(檔名) 幫你讀取檔案到script內,不論是.txt 或是 .json。

實例

(Plunkr)

假設你今天想在網站上,秀出六位好友的名單。

  1. Lily
  2. Ihc
  3. Suisui2
  4. Suisui
  5. Piggu
  6. 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提供的有全部檔案內容的參數。

還記得朋友名單.txt長怎樣嗎?
Lily
Ihc
Suisui2
Suisui
Piggu
Chhueh
所以,data=
Lily\n
Ihc\n
Suisui2\n
Suisui\n
Piggu\n
Chhueh\n
data.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

留言

這個網誌中的熱門文章

AngularJS (1) 宣告ng-app

href with relative url 在錨點使用相對路徑