1

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>
4

0 に答える 0