MVC5 and Angular.js routing - URLs not matching

Question

I'm having some trouble with routing in Angular.js and MVC5. I've simplified it down to the example below.

My angular routing code is:

app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {

    $routeProvider.when("/", {
        template: "<h1>index</h1>",
    })
    .when("/Home/About", {
        template: "<h1>about</h1>",
    })
    .when("/Home/Contact", {
        template: "<h1>contact</h1>",
    })
    .otherwise({
        template: "<h1>Error</h1>",
    });

}]);

The MVC Home controller has a method for each, and each view has a DIV with ng-view attribute.

When I browse to either about or contact the route is still mapping to Index.

If I change the index path to :

    $routeProvider.when("/Home/Index", {
        template: "<h1>index</h1>",
    })

then Otherwise kicks in and I see

Error

.

The code looks identical to other angular code I've used, and examples on the web. Any suggestions?

Updated: Thanks to the answers below. I think I didn't explain my problem well last night, the result of a long day. My problem is that I'm trying to have a mini-spa on a sub page of the site, so the route for the main page would be:

    .when("/userPermissions/index", {
        templateUrl: "/scripts/bookApp/userPermissions/main.html",
        controller: "userPermissionController",
    })

And the path of "/userPermissions/index" which would be the page provided by the server isn't being matched by the routing.

You must initialize controller - for example controller: "HomeController", template:... — Igor Semin
– Igor Semin, Commented Feb 5, 2015 at 18:22
No, not using html5 mode. In the simplified version, I'm not using an angular controller, just replacing templates. — John McArthur
– John McArthur, Commented Feb 5, 2015 at 18:29
As mentioned in the answers below, I had confused myself trying to have an angular SPA on two separate 'server' pages. I split my SPA into two separate modules, and host them separately on the two 'server' pages and all is fine. — John McArthur
– John McArthur, Commented Feb 6, 2015 at 16:42

Claies · Accepted Answer · 2015-02-05 18:37:48Z

Angular is by design a Single Page Application (SPA) framework. It is designed to process requests within a single server page request, and handle route changes without making subsequent calls to the server. Hence, for every page load, the page is at the "root" of the application. or /, no matter what path was used on the server to load the page.

Subsequent page loads and routing are handled using the 'hash' notation /#/someroute in order to suppress a browser reload. Thus, the actual route being matched by the angular $routeProvider is http://example.com/#/Home/About, but this is loaded from the / server route.

If you redirect the page to /Home/About on the server, but still want to get to that match in Angular, then the route would be http://example.com/Home/About#/Home/About. Quite problematic, as you can imagine.

HTML5 Routing Mode can be used to remove the #/ from your routes, Allowing you to match http://example.com/Home/About in the Angular $routeProvider. But, for Angular to really shine, you should also configure Rewrites on your server, and not handle these Routes as separate views in your ASP.Net application. Generally, you will have a much cleaner solution if you can restrict server communications to API calls, as mixing Server HTML (or Razor) with Client Side Angular gets very confusing very fast.

Pankaj Parkar · Accepted Answer · 2015-02-05 19:59:04Z

I would suggest you to create one base for your angular SPA.

That means you will need to create a C# controller inside your application that will have one action i.e. Index

SPAController.cs

using System.Web.Mvc;

namespace AngularApp.Controllers
{
    public class SPAController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Views/SPA/Index

    <ul>
        <li><a href="/#/">Home</a></li>
        <li><a href="/#/Home/About">About</a></li>
        <li><a href="/#/Home/Contact">Contact</a></li>
    </ul>

    <div ng-view></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>

Now all is set hit html ng-view will load partial view by watching route.

Hit in browser http://anything.com/spa/#/. Then your angular app will start working on page.

I would not suggest you to use html5mode() inside MVC app. That will create many problem inside your app. And it will take more time to manipulate things.

Thanks.

Collectives™ on Stack Overflow

MVC5 and Angular.js routing - URLs not matching

Error

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Error

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related