我正在为 CRUD 产品制作一个简单的 CRUD 应用程序。产品具有 ID、名称和价格。我已经构建了一个 ASP.NET Web API 来存储这些产品,并且我试图在 AngularJS SPA 中调用这个 API。我已经构建了一个模块和相应的组件来从 API 中获取所有产品并在视图中呈现它们(listProducts)。
我不确定应该如何将 API 地址放入 $http.get() 方法中。我的 API 地址是:localhost:58875/api/products。我的代码:
列表产品.module.js
angular.module('listProducts', []);
列表产品.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 告诉我它无法识别我的控制器,我不知道为什么。
列表产品.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>