今回は$httpオブジェクトを使用して自分のホームページ(サーバー)を起点として、外部にあるHTMLを取得、表示するためのチュートリアルをやろうと思います。
$httpオブジェクト
参考URLはこちらです。
単純にHTTPリクエストを送信して対象のURLからHTMLを取得するものです。
リクエストの種類
GET
今回使用するリクエストのメソッドです。よく「GETリクエスト」などと呼びます。このリクエストはhttp://XXXX,com/XXX.htmlなどのように対象のHTMLをダウンロードしようとします。ブラウザで表示しているのもこのリクエストになります。
こうして取得したHTMLをブラウザで表示、もしくは何かしらの処理を行う。。。などいろいろなことができます。
そして、パラメータをつけてJSONを取得するなどのWebAPIを使用する場合にも使用します。パラメータは下のようにつけてやります。
http://XXX.com/webapi/request/?param1=XXX¶m2=OOOOこんな感じで送信します。
POST
上のようにGETで用が足りてしまうのでPOSTメソッドはいらないだろう。。。そう思った方素晴らしい視点です。
しかし、上のようにパラメータを送信すると渡した値がURLで直接見えるため、セキュリティ的にアウトです。
例えば、URLに"XXX市XXX町2-1"などのように個人情報を含むような情報は送信できません。(情報漏洩です)
なのでPOSTメソッドの出番、となるわけです。
POSTメソッドは、単純にURLに値を渡さない方法です。
送信するURL(リクエスト)はhttp://XXX.comで良いのですが、ここでパラメータ(ユーザー名など)をサーバー側に送信したい場合はフォームに値を設定して送信します。
このようなリクエストをPOSTリクエストと呼びます。
本題
今回のように、HTMLをダウンロードするなどしてファイルを参照するときは、Webサーバーを起動してからAngularを実行する必要があります。
最近のブラウザはセキュリティがかかっているのでサーバーを解さないとエラーで対象のHTMLが取得できません。
実行する
参考サイトのコードをコピって(ちょいと修正して)起動してみると下のように表示できます。
コードは下のようになっています。HTMLとJSを１つのファイルに書いています。(チュートリアルなので、わかりやすいようにしています)、そして実行結果はこちらで確認できます。取得している「test.html」は、ブラウザで表示すれば、ただのテキストですが、取得したものは <div>タグがついています。。。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("test.html")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
コードについて
初めにJSが起動します。
var app = angular.module('myApp', []);でアングラーモジュールを作成。
app.controller('myCtrl', function($scope, $http) {でコントローラーを作成します。controller()の第一引数はコントローラー名、第二引数はコントローラーの処理(function)です。
ここで$scopeに設定している変数がHTML側で{{}}で囲っている部分にバインドされます。
なので、上のコード$scope.myWelcomeの値を表示するときは{{myWelcome}}を書けば良いです。
でわでわ。。。
