Angular ui-routing 和 Asp.net Route 不起作用答案

【问题标题】：Angular ui-routing and Asp.net Route not WorkingAngular ui-routing 和 Asp.net Route 不起作用
【发布时间】：2016-01-01 07:20:57
【问题描述】：

我对 Angular 很陌生，我正在尝试用一个参数做一个例子。不带参数的可以正常使用，但是带参数的链接就不行了。我在这里做错了什么？

应用和控制器：

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$routeProvider','$locationProvider', '$httpProvider',
    function ($routeProvider, $locationProvider, $httpProvider) {
        $locationProvider.hashPrefix('!').html5Mode(true);
        $routeProvider
        .when('/NewOrder', {
            templateUrl: 'templates/NewOrder',
            controller: 'AddOrderController'
        }).when('/ShowOrders/:orderID', {
            templateUrl: function (params) {return '/templates/ShowOrders?orderID=' + params.orderID; },
            controller: 'ShowOrdersController'
        }).otherwise({
            redirectTo: '/ShowOrders'
        });
    }
]);

myApp.controller('AddOrderController', function ($scope) {
    $scope.message = 'This is the add new order controller screen';
});

myApp.controller('ShowOrdersController', function ($scope,$routeParams) {
    $scope.message = 'This is the show orders controller';
    $scope.order_id = $routeParams.orderID;
});

Route.config 文件：

  routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "NewOrder",
            url: "templates/NewOrder",
            defaults: new { controller = "Templates", action = "AddOrder" });

            routes.MapRoute(
                name: "ShowOrders",
                url: "templates/ShowOrders/{orderID}",
                defaults: new { controller = "Templates", action = "ShowOrders", orderID = "" });

            routes.MapRoute(
                 name: "Default",
                 url: "{controller}/{action}/{id}",
                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
              );

            routes.MapRoute(
             name: "Defaults",
             url: "{*url}",
             defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
         );

html文件：

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-strict-di>
  <head>
    <title>AngularJS Routing example</title>
  </head>
 
  <body>
 
    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="/NewOrder"> Add New Order </a></li>
                <li><a href="/ShowOrders/123"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
      
    @*<script src="app.js"></script>*@
      <script src="~/Scripts/myApp.js"></script>
  </body>

【问题讨论】：

所有服务器路由都应该映射回角度入口点，而不是复制它们

标签： javascript angularjs asp.net-mvc-4 angularjs-routing

【解决方案1】：

首先你不应该混淆angular-router和ui-router，因为目前你正在使用angular-route，因此你应该使用ngRoute模块而不是ui-router

var myApp = angular.module('myApp', ['ngRoute'/*, otherDependencies */]);

You can not have params inside your templateUrl function 在使用 Angular 的 1.0.7 版本时，您应该使用最新版本，该版本增加了对 $routeParmas 的支持，您可以在 $routerProvider templateUrl 函数中使用 $routeParmas（实际上，角度从 1.1+ 开始添加了此支持） .

或者，如果您出于某种原因想坚持使用旧版本，那么您可以在您的 .config 函数中包含 $routeParams 作为依赖项。

.when('/ShowOrders/:orderID', {
     templateUrl: '/templates/ShowOrders?orderID=' + $routeParams.orderID,
     controller: 'ShowOrdersController'
})

【讨论】：

注意同时加载 ui-router 但使用 ngRoute 的配置
@charlietfl 感谢您的提醒。我已经相应地进行了编辑

【解决方案2】：

EDIT 注意 - 根据 Charlietfl 在下面的评论，这是错误的答案。根据 Stack Overflow 的偏好，我不会删除它，因为错误的内容有时也可以帮助引导用户找到答案。

你不得不原谅，因为自从做 angular + MVC4 以来已经一年多一点了......我什至不确定这是否应该成为评论的“答案”

但是

我对角度路由的回忆是，它们仅根据哈希后发生的事情发生（除非配置设置）

您能花点时间测试一下路线吗：

 /ShowOrders/123#/ShowOrders/123

看看有没有什么变化？同时，我将通过一些旧代码来查看是否可以回忆起角度路由的 nit-pickle-y 位。

【讨论】：

角度路由中的html5Mode 删除了使 url 像虚拟服务器目录一样的哈希
谢谢！我没有注意到 - 我已经更新了我的错误答案，但决定不删除，因为有人可能会在你关于 html5Mode 的评论中找到价值。