AngularJS с областями MVC

Question

У нас есть существующее/устаревшее приложение MVC 5 и мы хотели бы «экспериментировать» с некоторыми AngularJS SPA в основном приложении.

Чтобы сохранить это в чистоте и отдельно, мы создали новый MVC Area (приложение уже использует Areas) со следующим контроллером по умолчанию ...

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

на/Планировщик/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); 

Когда мы запускаем приложение и нажмите на навигационные ссылки (например, 'PageTwo') Я всегда возвращаюсь на домашнюю страницу стандартного веб-сайта со следующим URL-адресом http://localhost:52654/#/PageTwo.

Я не уверен, что проблема заключается в том, что AngualrJS не перехватывает ссылку, если это проблема маршрутизации MVC.

Любая помощь/совет будут оценены.

Answer 1

Вы используете неправильный синтаксис href с дополнительными ведущими /.

Ведущий / на любой относительный URL-адрес будет искать базовый корень. Таким образом, все, что вы делаете перезагрузки страницы каждый раз, когда

Изменение

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

К

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

Все, что вы хотите, это хэш в HREF, то угловой путь все после #