AngularJS チュートリアル7〜$http 外部画面(HTML)を取得する〜

今回は$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を1つのファイルに書いています。(チュートリアルなので、わかりやすいようにしています)、そして実行結果はこちらで確認できます。取得している「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}}を書けば良いです。

でわでわ。。。