コントローラと工場を経由してjson-serverデータにアクセスしようとしています

Question

私は非常に単純なテストアプリケーションを角度jsで作成しており、jsonサーバーに格納されたデータを表示して表示します。次のように

db.jsonは、次のよう

{ 
    "examples": [ 
    { 
     "id": 0, 
     "name": "example 0", 
     "description": "Example 0 description." 
    }, 
    { 
     "id": 1, 
     "name": "example 1", 
     "description": "Example 1 description." 
    } 
    ] 
} 

コントローラは、次のよう

angular.module('my_app') 

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) { 

    $scope.example = exampleFactory.query({ 
     }) 
     .$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
     ); 

}]) 

工場は、次のよう

.factory('exampleFactory', ['$resource', 'baseURL', function ($resource, baseURL) { 

     return $resource(baseURL + "examples/:id", null, { 
      'update': { 
       method: 'PUT' 
      } 
     }); 
}]) 
; 

そして図である。

<p>Test outside repeat: {{message}}</p> 

<ul> 
    <li ng-repeat="example in examples"> 
     <p>Test in repeat: {{message}}</p> 
     <p>{{example.name}}</p> 
     <p>{{example.description}}</p> 
    </li> 
</ul> 

ここで興味深いのは、データが工場から返されていることです。上記の例では、最初のテスト（ng-repeatの外側）はフルセットを返します。しかし、ng-repeatの中に何も表示されません。

サービスを使用してわずかに異なる配置を使用していますが、ファクトリを使用して作業しているようです。

これはなぜ、誰が私を正しく置くことができるか考えている人はいませんか？あなたが方法を得ることができるよう、私は工場を使用してお勧めしたい

angular.module('my_app') 

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) { 

    $scope.example = exampleFactory.query({ 
     }) 
     .$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
       $scope.examples = examples.examples; // I may be reading the JSON wrong here. 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
     ); 

}]) 

Answer 1

私はあなただけ$scope.examplesを割り当てるために忘れてしまったと思うので、ng-repeatは、上のループにはデータがありませんでしたファクトリが返される前にファクトリ内部に格納されます。おそらく、少し不格好

.controller("ExampleController", function($scope, exampleFactory) { 
    exampleFactory.query(function(response) { 
     $scope.examples = response; 

     $scope.examples.$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
    ); 

    }); 
}); 

をし、それ：あなたの興味JavaScript Design Patterns

angular 
    .module('my_app') 
    .controller('ExampleController', ['$scope', 'exampleFactory', 
    function($scope, exampleFactory) { 
     function getMessageList() { 
     exampleFactory 
      .getMessages() 
      .then(function(messages) { 
      $scope.examples = messages; 
      }) 
      .catch(function(response) { 
      $scope.message = "Error: " + response.status + " " + response.statusText; 
      }); 
     } 
     getMessageList(); 

    } 
    ]) 
    .factory('exampleFactory', ['$http', 'baseURL',function($http, baseURL) { 
     function getMessages() { 
     return $http 
      .get(baseURL) 
      .then(function(jsonResp) { 
      return jsonResp.data; 
      }) 
      .catch(function(error) { 
      //handle error if needed 
      console.log(error); 
      }); 
     } 
     return { 
     getMessages: getMessages 
     }; 
    } 
    ]); 

<p>Test outside repeat: {{examples}}</p> 

<ul> 
    <li ng-repeat="example in examples"> 
    <p>Test in repeat: {{message}}</p> 
    <p>{{example.name}}</p> 
    <p>{{example.description}}</p> 
    </li> 
</ul> 

Answer 2

：

おかげ ステフ

Answer 3

は、最終的に次のように変更するコントローラによって、それをソートした場合には、ここで暴露のモジュールパターン、良い読み取りですそれをさらに減らすことができればうれしいですが、私はこのすべてに非常に新しいので、私は今これで行くでしょう。