单页应用程序的角度路由（ASP.Net MVC Web API）答案

【问题标题】：Angular Routing for Single Page Application (ASP.Net MVC Web API)单页应用程序的角度路由（ASP.Net MVC Web API）
【发布时间】：2016-10-22 00:04:38
【问题描述】：

向用户显示公司列表
用户选择了一家公司，然后会看到为该公司定义的报告列表

我已经这样配置了我的角度应用程序：

angular.module('xcmApp', ['ngRoute', 'ngResource'])
.config(function ($routeProvider) {
    $routeProvider
    .when('/',
    {
        controller: 'companiesController',
        templateUrl: '/views/companylist.html'
    })
    .when('/Reports/:companyid',
    {
        controller: 'reportsController',
        templateUrl: 'views/reportlist.html'
    })
    .otherwise({ redirectTo: '/' })
})
.factory('companiesFactory', ['$resource',
    function ($resource) {
        return $resource('/api/companies', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    }
])
.controller('companiesController', function ($scope, companiesFactory) {
    $scope.Companies = companiesFactory.query();
})
.factory('reportsFactory', ['$resource',
    function ($resource) {
        return $resource('/api/reports/:companyid', {}, {
            query: { method: 'GET', params: { companyid: '@@companyid' }, isArray: true }
        });
    }
])
.controller('reportsController', function ($scope, reportsFactory) {
    $scope.Reports = reportsFactory.query();
});

我的 WebAPI 控制器很简单：

[Route("api/[controller]")]
public class ReportsController : Controller
{
    // GET: api/values
    [HttpGet("{companyid}")]
    public IEnumerable<PBMMMIS.Data.WebReport> Get(string companyid)
    {
        return Xerox.XCM.PBMMMIS.Data.CompanyAPIDataContext.GetReports(companyid);
    }

}

我不确定如何构造路由以接受companyid 参数，以便可以相应地获取报告列表。真诚感谢任何帮助。

【问题讨论】：

标签： angularjs asp.net-mvc asp.net-web-api single-page-application ngroute

【解决方案1】：

控制器需要 RoutePrefix，操作方法需要 Route。

[RoutePrefix("api/reports")] <=== RoutePrefix
public class ReportsController : Controller
{
    [HttpGet]
    [Route("{companyid}")]  <=== Route
    public IEnumerable<PBMMMIS.Data.WebReport> Get(string companyid)
    {
        return Xerox.XCM.PBMMMIS.Data.CompanyAPIDataContext.GetReports(companyid);
    }
}

【讨论】：

【解决方案2】：

您的控制器和方法应如下所示：

[Route("api/reports")]
public class ReportsController : Controller
{

    [HttpGet]
    [Route("{companyid}")]
    public IEnumerable<PBMMMIS.Data.WebReport> Get(string companyid)
    {
        return Xerox.XCM.PBMMMIS.Data.CompanyAPIDataContext.GetReports(companyid);
    }
  ......
  }

电话应该是：

$resource('/api/reports/:companyid', {companyid: '@@companyid'}, {
  query: { method: 'GET', isArray: true} 
});

【讨论】：