Search code examples
angularjsasp.net-mvc-4angularjs-routingasp.net-routing

Asp.net MVC 4 Catch All Routing

I've been learning and doing examples with angular and Asp.Net MVC. I ran into an issue with a catch all route. After adding the catch all route, my browser kept crashing. If I remove the catch all, the url works fine except refreshing the page is giving a 404 error message. What did I do wrong here?

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';
});

this is the route configuration that I created.

  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" });
        }
    }

//The index page

    <!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>
Solution

  • The main issue was using ['ui.router'] instead of ['ngRoute']. I changed it [ngRoute', and I was still getting the same behavior. However, after clearing my cache and restart my browser, I see the expected behavior.

    <!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']);