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>
デモ
- デモ:http://osyo-manga-sandbox-pages.github.io/angularjs-resource-get/
- リポジトリ:https://github.com/osyo-manga-sandbox-pages/angularjs-resource-get
上記のコードだと ajax 通信を完了したかどうかを確認する必要がないので、だいぶすっきりと書くことが出来ました。
ハマりポイントとしては get 関数と query 関数の違いですね。
サーバから返ってくるのが JSONオブジェクトである場合(つまり一番外側の括弧が {} の場合)は get 関数を使い、JSONアレイ(一番外側の括弧が[])の場合は query関数を使う必要があることにも注意すること。
という風に使い分ける必要があるようです。