0

AngularJS のチュートリアルのものと非常によく似たテスト アプリを作成しましたが、大きな違いが 1 つあります。それは、Yeoman で初期化されていることです。

私の工場コードは次のようになります。

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

deClashServices.factory('Session', 
  ['$resource',
  function ($resource) {
    return $resource('views/sessions.json');
  }]
);

はい、angular-resource.js が index.html に追加されました。私のコントローラー、およびサービスjsファイルと同様に。はい、私の app.js で見られるように、deClashServices は ng-app への依存関係としてリストされています。

var declashAngularApp = angular.module('declashAngularApp', [
  'ngRoute',

  'deClashServices',
  'deClashControllers'
]);

declashAngularApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/sessions', {
        templateUrl: 'views/sessions.html',
        controller: 'SessionListCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

ここに私のコントローラーがあります：

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

deClashControllers.controller('MainCtrl', 
    ['$scope', 'Session', 
    function ($scope, Session) {
        $scope.sessions = Session.query();
        $scope.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];
    }]
);

main.htmlの下にあるMainCtrlinは{{awesomeThings}}、予想どおり、3 つの文字列の配列を生成します。しかし{{sessions}}、空の配列を生成します。

それをロードしていないのが .query() であることを特定するために、単純な JSON ファイルでファクトリを使用してみました。{"sessions":"number1"}

deClashServices.factory('Session', 
  ['$resource',
  function ($resource) {
    return $resource('views/simple.json');
  }]
);

そして、私のコントローラーは次のようなものです：

deClashControllers.controller('MainCtrl', 
    ['$scope', 'Session', 
    function ($scope, Session) {
        $scope.sessions = {};
        Session.get(function(response) {
            $scope.sessions = response.sessions;
        });
        $scope.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];
    }]
);

このコードは機能します。ただし、 JSON 配列に戻ってコールバックを試行して.query.$promise.then(callback-function)も機能しません。

ほぼ同じ構造の AngularJS のチュートリアル コードが機能するため、私はかなり迷って混乱しています。

の使い方に何か問題があるのではないかと思います.query()が、同時に Angular チュートリアルでも同じ方法が使用されており、問題はありません。

私が示したいくつかのコードスニペットの外にある可能性がある場合に備えて、プロジェクト全体のコードで: github

4

1 に答える 1

0

Angular のリソース サービスは約束を返しません。空のオブジェクトを返すため、リクエストがサーバーから返されたときに、リソースサービスはそのオブジェクトへの参照を持っているため、フェッチされたデータをそのオブジェクトに入力できます。

したがって、返されたデータに反応したい場合は、コールバック関数を使用するか、$http-service を使用する必要があります。これは promise を返すためです。

このplkrを見てください

Restangularもご覧になることをお勧めします。

于 2014-01-25T12:54:44.623 に答える