Question

我一直在学习并使用angular和Asp.Net MVC做示例。我遇到了一个捕获所有路线的问题。添加catch all all route后，我的浏览器一直崩溃。如果我删除全部catch，则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>

Answer 1

主要问题是使用['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']);

Asp.net MVC 4抓住所有路由

1 个答案: