CRUD製品への簡単なCRUDアプリケーションを作成しています。製品には、ID、名前、および価格があります。これらの製品を格納するための ASP.NET Web API を作成しましたが、この API を AngularJS SPA で呼び出そうとしました。API からすべての製品を取得し、それらをビュー (listProducts) に表示するモジュールと対応するコンポーネントを作成しました。
$http.get() メソッドに API アドレスを入れる方法がわかりません。私の API アドレスは、localhost:58875/api/products です。私のコード:
list-products.module.js
angular.module('listProducts', []);
list-products.component.js
angular.
module('listProducts').
component('listProducts', {
templateUrl: 'app/products/list-products/list-products.html',
controller: ['$http',
function listProductsController($http) {
var self = this;
$http.get('http://localhost:58875/api/products').then(function(response) {
self.products = response.data;
});
}
]
});
angularがコントローラーを認識していないと言っており、その理由がわからないため、ビューにも問題があります。
list-products.html
<div class="container" ng-controller="listProductsController">
<h2>Products</h2>
<hr>
<div ng-repeat="p in products">
<li>{{p.ID}}</li>
<li>{{p.Name}}</li>
<li>{{p.Price}}</li>
</div>
</div>