Question

我们有一个现有/传统的MVC 5应用程序，并希望实验＆＃39;在主应用程序中使用一些AngularJS SPA。

为了保持这种清洁和分离，我们使用以下默认控制器创建了一个新的MVC区域（应用程序已经使用区域）......

namespace Acme.WebAdmin.Areas.Scheduler.Controllers
{
    public class HomeController 
       : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PageOne()
        {
           return PartialView();
        }

        public ActionResult PageTwo()
        {
           return PartialView();
        }

        public ActionResult PageThree()
        {
           return PartialView();
        }
    }
}

SchedulerAreasRegistration.cs文件如下所示：

public class SchedulerAreaRegistration : AreaRegistration 
{
    public override string AreaName 
    {
        get 
        {
            return "Scheduler";
        }
    }

    public override void RegisterArea(AreaRegistrationContext context) 
    {
        context.MapRoute(
            "Scheduler_default",
            "Scheduler/{controller}/{action}/{id}",
            new
            {
               controller = "Home",
               action = "Index", 
               id = UrlParameter.Optional
            }
        );
    }
}

在/ Scheduler / Home / Index View上，我们有以下HTML：

<div ng-app="SchedulerApp" ng-controller="ManagementPageController">


   <p>{{models.helloAngular}}</p>

   <ul>
        <li><a href="/#/PageOne">PageOne</a></li>
        <li><a href="/#/PageTwo">PageTwo</a></li>
        <li><a href="/#/PageThree">PageThree</a></li>
    </ul>

   <div ng-view></div>

</div>

我们还将路由依赖项添加到AngularJS应用程序：

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

SchedulerApp.controller('ManagementPageController', ManagementPageController);

var configFunction = function ($routeProvider, $locationProvider) {
   $routeProvider.
       when('/PageOne', {
          templateUrl: 'Home/PageOne'
       })
       .when('/PageTwo', {
          templateUrl: 'Home/PageTwo'
       })
       .when('/PageThree', {
          templateUrl: 'Home/PageThree'
       });

   $locationProvider.html5Mode(true);
}
configFunction.$inject = ['$routeProvider', '$locationProvider'];

SchedulerApp.config(configFunction);

当我们运行应用并点击导航链接（例如＆＃39; PageTwo＆＃39;）时，我总是会返回标准网站主页，其中包含以下网址http://localhost:52654/#/PageTwo。

我不确定问题是AngualrJS是否没有拦截引用，如果它是MVC路由问题。

任何帮助/建议都将不胜感激。

Answer 1

您正在使用带有额外前导/的不正确的href语法。

任何相对网址上的前导/都会查找基础根。因此，您所做的只是每次重新加载页面

更改

<a href="/#/PageTwo">PageTwo</a>

要

<a href="#/PageTwo">PageTwo</a>

您想要的只是href中的哈希值，然后角度路径就是#

之后的所有内容

AngularJS与MVC领域

1 个答案: