使用 AngularJS 1.4.7 服务调用 ASP.NET Web API 不起作用

Question

我在这个项目中使用 Visual Studio 2015 社区版和 AngularJS 1.4.7。

ProductAPIController.cs

public class ProductAPIController : ApiController
{
    [HttpGet]
    public IQueryable<Product> MyProducts()
    {
        List<Product> p = new List<Product>() { new Product {ProductName ="abc", Id = 1, Description = "Desc 1" },
                                                new Product {ProductName ="def", Id = 2, Description = "Desc 2" },
                                                new Product {ProductName ="ghi", Id = 3, Description = "Desc 3" } };
        return p.AsQueryable();
    }
}

Product.cs

public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}

app.module.js 按照最佳实践here

中的建议，我为应用模块使用了单独的文件

(function () {
    'use strict';
    angular.module('app', ['ngCookies', 'ngRoute'])
})();

homeCtrl.js

这里我在同一个文件中同时使用了服务和控制器。我什至尝试在单独的文件中使用它，但它仍然不起作用。

(function () {
   'use strict';
   angular.module('app')
   .controller('homeCtrl', ['$scope', '$http', 'ProductService', '$location', function homeCtrl($scope,  $http, ProductService, $location) {
    $scope.products = [];

    $scope.getProducts = function () {
        ProductService.getProducts().then(function (response) {
            $scope.products = response.data;
        }, function (err) {
            alert(err);
        });
      };
   }])
   .service('ProductService', ['$http', function ($http) {
       this.getProducts = function () {
          return $http.get('/api/ProductAPI');
       };
    }]);
})();

index.cshtml

这里我用data-ng-repeat="item in products"

<div class="row" ng-app="app">
   <div class="col-md-12" ng-controller="homeCtrl">
      <div class="row">
          <div class="col-md-12">
              <form id="test">
                  <div data-ng-repeat="item in products">
                      <div class="col-sm-4 column productbox">
                          <div class="producttitle">{{item.ProductName}}</div> <div class="action"></div>
                          <div class="productprice">
                              <div class="pull-right">
                                  <div >{{item.Id}}</div> 

                                  <a href="" class="btn btn-danger btn-sm" role="button"><span class="glyphicon glyphicon-arrow-right"></span> Get Quote</a>
                              </div>
                              <div class="pricetext">{{item.Description}}</div>
                          </div>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>
@section scripts
{
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/angular-cookies.min.js")
    @Scripts.Render("~/Scripts/angular-route.js")
    @Scripts.Render("~/Ng/app.module.js")
    @Scripts.Render("~/Ng/homeCtrl.js")
}

我尝试了几种不同的方法，但都失败了。我在这里做错了什么？

编辑

我已将示例项目上传到 GitHub here 。下载后您可能需要重新构建项目以同步相关包。

编辑：回答

为了以后参考，如果像我这样的AngularJS初学者正在看这个问题，答案如下。 基于@Miyuru Ratnayake 给出的accepted answer，刚刚更改了

$scope.getProducts = function () {
 ......
}

到

function getProducts() { 
   ...
}

并称之为before the function 声明。不需要单独的函数 activate()。

所以控制器是这样的：

.controller('homeCtrl', ['$scope', '$cookies', '$http', 'ProductService', '$location', function homeCtrl($scope, $cookies, $http, ProductService, $location) {
    $scope.products = [];
    getProducts();
    function getProducts() { 
        ProductService.getProducts().then(function (response) {
            $scope.products = response.data;
        }, function (err) {
            alert(err);
        });
    };
}])

Answer 1

如果您实际上使用 github 中的当前代码版本查看浏览器控制台，您会立即发现问题在于，在控制器中声明函数的顺序会导致您遇到一种情况您正在尝试执行尚未定义的功能。

我重新订购了您的控制器以执行以下操作：

$scope.products = [];

function activate() {
    $scope.getProducts();
}

$scope.getProducts = function () {
    ProductService.getProducts().then(function (response) {
        $scope.products = response.data;
    }, function (err) {
        alert(err);
    });
};

activate();

此外，在您的 index.cshtml 中，您引用了错误案例的产品详细信息。

例如，你有这个：

{{item.ProductName}}

什么时候应该是这样的：

{{item.productName}}

Answer 2

默认情况下，ASP.NET Web API 会查找“api/{controller}/{id}”，这意味着它ProductAPIController 应该具有 GET、POST、PUT 等方法, DELETE 基于 REST 概念与模型一起工作。

但是在您的 ProductAPIController 代码中，GetProducts() 是用 HTTPGET 修饰的自定义操作方法，但即使这样，Web API 路由也不会理解这一点，直到您定义路由应该是“api/{controller}/{action }/{id}”。

打开WebApiConfig.cs，如下修改路由模板并测试。 我添加了 {action}，以便 Web API 路由在 API Controller 中查找自定义操作。

config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

只是一个建议 如果您计划使用“GetProducts”、“GetProductsByName”等自定义操作方法；使用这个路由模板。

始终使用 POSTMAN 或 Fiddler 测试 Web API，然后在客户端代码中使用它们。我附上了通过 PostMan 测试的 GetProducts 的屏幕截图。

Answer 3

您忘记在 API 调用中定义方法名称，试试这个：

.service('ProductService', ['$http', function ($http) {
   this.getProducts = function () {
      return $http.get('/api/ProductAPI/myProducts');
   };
}]);

Answer 4

您应该在某处调用控件中的 getProducts() 方法...我没有看到它被调用。

通常我创建一个如下的激活方法并在控件中调用它：

(function () {
    'use strict';
    angular.module('app')
    .controller('homeCtrl', ['$scope', '$cookies', '$http', 'ProductService', '$location', function homeCtrl($scope, $cookies, $http, ProductService, $location) {
        $scope.products = [];

        activate();

        function activate() {
            getProducts();
        }

        function getProducts () {
            ProductService.getProducts().then(function (response) {
                $scope.products = response.data;
            }, function (err) {
                alert(err);
            });
        };
    }])
    .service('ProductService', ['$http', function ($http) {
        this.getProducts = function () {
            return $http.get('/api/ProductAPI');
        };
    }]);
})();