是否可以让 angular 处理一些路由而 mvc 处理其他路由？

Question

所以我正在开发一个现有的 MVC 应用程序，几天前我们添加了一个角度模块。我们尝试用 ajax 加载它，但是 angular 拒绝加载，所以我们决定在 index.js 上添加 angular route 和 ng-view。问题是只有角度路线在工作，MVC 路线已经死了。我是否需要将它们一一添加到$routeProvider，这会导致大量不必要的工作？我们还尝试使用 2 进行测试，当 c# 控制器返回 View() 时，它不会加载到特定的 ng-view div 中，只需将部分加载为整页。

这是我的实际路线配置：

$routeProvider
      .when('/', {
          templateUrl: '/ServiceDesk/starter'
      })
          //Facturas
      .when('/app/Facturacion/MantenimientoFacturas', {
          templateUrl: '/Facturacion/MantenimientoFacturas',
          controller: 'FacturasController'
      })
          // Ordenes
          .when('/app/Facturacion/MantenimientoOrdenes', {
              templateUrl: '/Facturacion/MantenimientoOrdenes',
              controller: 'OrderController'
          });

      $locationProvider.html5Mode(true);

我希望 Angular 只是为了管理这条路线，而所有其他路线都由 MVC 管理，这可能还是更好的方法？

Answer 1

由于路线的优先级取决于顺序，因此您只需要了解您的路线在 MVC 路线中的顺序即可。例如，它看起来像

/app/Facturacion/

是你希望 Angular 运行的地方。因此，在您的 MVC 路由中，将其添加为 RouteConfig 中的第一条路由

routes.MapRoute(
    name: "ngRoute",
    url: "app/Facturacion/{*angularRoute}",
    defaults: new {controller = "Facturacion", action = "Index" }
);

因此，现在无论何时您选择以 app/Facturacion/ 开头的路线，角度路线都会接管。否则它将跳过并继续使用 MVC 路由。如果有特定的 MVC 路由使用与 Angular 相同的路径 (/app/Facturacion/)，请将其添加到 RouteConfig 中的 ngRoute 上方，这将继续运行 MVC 而不是 Angular。

routes.MapRoute(
    name: "myMvcRoute",
    url: "app/Facturacion/someRoute",
    defaults: new {controller = "Facturacion", action = "SomeAction" }
);

确保在您的 FacturacionController 中 Index 操作返回视图，并在您的视图中添加您的角度脚本和角度代码。示例视图类似于

@{
   ViewBag.Title = "Facturacion";
}
@section head{
   <base href="/"> //Add a head section in your layout (make it optional)
}
@section scripts{
  @Scripts.Render("~/bundles/angularjs")
  @Scripts.Render("~/bundles/facturacionSPA")
}
<div ng-app="facturacionApp">
  <div ng-view></div>
</div>

你的 Angular 路由看起来像

  $routeProvider.when('/app/Facturacion/MantenimientoFacturas', {
    templateUrl: '/Facturacion/MantenimientoFacturas',
    controller: 'FacturasController'
  }).when('/app/Facturacion/MantenimientoOrdenes', {
    templateUrl: '/Facturacion/MantenimientoOrdenes',
    controller: 'OrderController'
  }).otherwise({
    redirectTo: '/ServiceDesk/starter',
  });

此外，角度模板应该是常规的 html 文件，而不是部分视图。最好坚持 angular 的 angular 的东西和 MVC 的 mvc 东西，我认为不要混合它们！

编辑： 如果 '/ServiceDesk/starter' 是一个 mvc 路由并且您不希望 angular 路由到它，您可以在 angular 控制器中执行以下操作：

if ($location.url().indexOf('/ServiceDesk/starter') >= 0 && supports_history_api()) $window.location.href = '/ServiceDesk/starter';

supports_history_api() 代码的完整性，这决定了我是否对 $locationProvider 使用 html5 模式，因为我需要旧的 IE 才能工作

function supports_history_api() {
  return !!(window.history && history.pushState);
}