Angularjs Asp.net MVC 4捕获所有路由_Angularjs_Asp.net Mvc 4_Angularjs Routing_Asp.net Routing

Angularjs Asp.net MVC 4捕获所有路由

angularjs asp.net-mvc-4

Angularjs Asp.net MVC 4捕获所有路由,angularjs,asp.net-mvc-4,angularjs-routing,asp.net-routing,Angularjs,Asp.net Mvc 4,Angularjs Routing,Asp.net Routing,我一直在学习和使用angular和Asp.NETMVC制作示例。我遇到了一个通吃路线的问题。添加“全包”路线后，我的浏览器不断崩溃。如果我删除了catch-all，url工作正常，只是刷新页面时会显示404错误消息。我做错了什么 My App and Controller: var myApp = angular.module('myApp', ['ui.router']); myApp.config(['$routeProvider','$locationProvider', fun

我一直在学习和使用angular和Asp.NETMVC制作示例。我遇到了一个通吃路线的问题。添加“全包”路线后，我的浏览器不断崩溃。如果我删除了catch-all，url工作正常，只是刷新页面时会显示404错误消息。我做错了什么

My App and Controller:
var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider
        .when('/AddNewOrder', {
            templateUrl: 'templates/AddOrder',
            controller: 'AddOrderController'
        }).when('/ShowOrders', {
            templateUrl: 'templates/ShowOrders',
            controller: 'ShowOrdersController'
        }).otherwise({
            redirectTo: '/ShowOrders'
        });
        $locationProvider.hashPrefix('!').html5Mode(true);
    }
]);

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

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

这是我创建的路由配置

  public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

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

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

//索引页

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AngularJS Routing example</title>
    </head>
  <body ng-app="myApp">
    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <class="nav">
            <><href="/AddNewOrder"> Add New Order </a></li>
                <><href="/ShowOrders"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>  

    @*<script src="app.js"></script>*@
      <script src="~/Scripts/myApp.js"></script>
  </body>
</html>


AngularJS路由示例
添加新订单
显示秩序

@**@

主要问题是使用['ui.router']而不是['ngRoute']。我更改了[ngRoute]，仍然得到相同的行为。但是，在清除缓存并重新启动浏览器后，我看到了预期的行为

<!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>
               <div ng-controller="CalculatorController">
                <li><a href="/Calculator">Calculator</a></li>
              </div>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>


   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>  
   @*   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>*@
    @*<script src="app.js"></script>*@
      <script src="~/Scripts/myApp.js"></script>
  </body>


//the new module using ngRoute.

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


AngularJS路由示例





@*   *@
@**@
//新模块使用ngRoute。
var myApp=angular.module（'myApp'，['ngRoute']）；