MVC5 and Angular.js routing - URLs not matching

问题

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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/28351124/mvc5-and-angular-js-routing-urls-not-matching