[解決済み] angular.js の ng-model に json を読み込むにはどうしたらいいですか？

質問

おそらく非常に明白な質問だと思うのですが、どこにも答えが見つかりませんでした。

私はサーバーからクライアントにいくつかのJSONデータをロードしようとしています。今現在、私はAJAX呼び出しでそれをロードするためにJQueryを使用しています（以下のコード）。

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

これはhtmlファイル内にあります。ここまではうまくいくのですが、問題はAngularJSを使いたいことです。Angularは変数を使うことができますが、全体を変数にロードしてfor eachループを使うことができません。これは、通常.jsファイルにある"$Scope"に関連しているように思われます。

問題は、他のページから .js ファイルにコードを読み込むことができないことです。Angular のすべての例では、このようなものしか表示されません。

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

というわけで、これは以下のような場合に便利です。 A) 全部手書きで入力したい、かつ B) データが何であるか事前に知っている場合。

事前にわからない（データは動的）ので、タイプしたくない。

そこで、$Resourceを使ってAngularへのAJAX呼び出しを変更しようとしたところ、うまくいかないようです。もしかしたら解らないのかもしれませんが、JSONデータの比較的単純なGETリクエストです。

tl:dr Angularのモデルに外部データを読み込むためのAJAXコールがうまくいきません。

どのように解決するのですか？

Kris が言及しているように、あなたは $resource サービスを使うこともできますが、あなたはAngularを使い始めているようなので、私は先週そこにいました。 $http サービスを直接試すことをお勧めします。この場合、その get メソッドを呼び出すことができます。

以下のようなJSONがあった場合

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

このように読み込むことができます。

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

は get メソッドは 約束 オブジェクトを返します。 を返します。 成功 コールバックで、第二引数は エラー コールバックです。

を追加したとき $http を関数のパラメータとして追加すると、Angularは魔法を使って を実行し $http リソースをコントローラに注入します。

ここにいくつかの例を載せておきます。

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567