!!![AngularJS] 非同期で外部データを受け取る
AngularJSの「$http」を使用することで、外部テキストを取得できます。
このデータ自身はサーバー上のPHPから出力するものでもいいですし、
サーバーに配置したテキストファイルでもOKです。
外部テキストファイルを「test.txt」、htmlファイル自身を「index.html」とします。
!!注意事項 (IEのみ)
本件検証していたところ、IEでローカルでのブラウザ実行時のみ、$httpのアクセスは失敗するようでした。
IEでのサーバー(http)での実行、FireFox/Chrome/Safariでのサーバー/ローカル実行時は正常に動作することを確認。
!!例
!外部データ(ファイル)test.txtの内容
Hello External Text!!
!index.html
データ渡しのテスト
データ渡しのテスト
info : {{info_message}}
index.htmlをWebブラウザで読み込んで
「データ受信」ボタンを押すと、Hello External Text!! と表示されます。
JavaScriptの「myController」関数内の$scope.dataSendに、ボタンが押された場合の処理を記述。
$http({method: 'GET', url: './test.txt'}).
success(function(data, status, headers, config) { // データの取得が成功した場合
$scope.info_message = data;
}).
error(function(data, status, headers, config) { // データの取得が失敗した場合
$scope.info_message = "error : status = " + status;
});
が非同期でファイル読み込みを行う箇所になります。
途中。。。
----
{{lastmodified}}