AngularJS で ajax 通信を行ってみた

AngularJS で ajax 通信を行う手段はいくつかあるようなのですが、今回は angular-resource を試してみました。

[コード]

<html ng-app='MyApp'>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js'></script>
    <link href='http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' rel='stylesheet'>
    <meta charset='utf-8'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta content='width=device-width, initial-scale=1' name='viewport'>
  </head>
  <body>
    <div class='container'>
      <div id='header'>
        <h1>
          Jokes
        </h1>
      </div>
      <script>
        angular.module("MyApp", ["ngResource"])
          .controller("MainCtrl", function ($scope, $resource) {
          var Joke = $resource("http://api.icndb.com/jokes/random/:count");
          $scope.count = 20;
          $scope.get = function (count){
            $scope.jokes = Joke.get({ count: count });
          };
          $scope.get(20);
        });
      </script>
      <div ng-controller='MainCtrl'>
        <form novalidate=''>
          <div class='input-group input-group'>
            <span class='input-group-btn'>
              <button class='btn btn-info' ng-click='get(count)'>Joke count</button>
            </span>
            <input class='form-control' id='input_text' ng-model='count' type='text'>
          </div>
        </form>
        <p ng-hide="jokes['value']">
          読み込み中
        </p>
        <div class='joke' ng-repeat="joke in jokes['value']">
          {{ joke["joke"] }}
        </div>
      </div>
    </div>
  </body>
</html>

デモ

上記のコードだと ajax 通信を完了したかどうかを確認する必要がないので、だいぶすっきりと書くことが出来ました。
ハマりポイントとしては get 関数と query 関数の違いですね。

サーバから返ってくるのが JSONオブジェクトである場合(つまり一番外側の括弧が {} の場合)は get 関数を使い、JSONアレイ(一番外側の括弧が[])の場合は query関数を使う必要があることにも注意すること。

という風に使い分ける必要があるようです。

参照