如何在AngularJS中创建一个RESTful Web API的GET请求？

Question

我正在为CRUD产品制作一个简单的CRUD应用程序。产品具有ID，名称和价格。我已经构建了一个ASP.NET Web API来存储这些产品，我试图在AngularJS SPA中调用这个API。我已经构建了一个模块和相应的组件来从API获取所有产品并在视图中呈现它们（listProducts）。

我不确定如何将API地址放在$ http.get（）方法中。我的API地址是：localhost：58875 / api / products。我的代码：

列表products.module.js

angular.module('listProducts', []);

列表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;
            });
        }
    ]
});

在我看来，我也遇到了麻烦，因为有角度告诉我它无法识别我的控制器，我无法弄清楚原因。

列表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>