将 Angular 路由与 MVC 部分视图混合？答案

【问题标题】：Mixing Angular routing with MVC Partial Views?将 Angular 路由与 MVC 部分视图混合？
【发布时间】：2013-07-27 09:55:48
【问题描述】：

我想在我的大部分应用程序中使用角度模板，但对于某些页面我想使用 aspnet mvc 控制器和在 ng-view 中显示的部分视图。

我一直在尝试这样的路由：

when('/AccountX/Manage', { templateUrl: '/Account/Manage', controller: AccountController }).
when('/Account/Manage', { controller: AccountController }).

我还将帐户/管理表单更改为 ajax，但似乎在发布表单后，角度会继续获取。

我正在使用没有 hashbangs 的 html5Mode。我的目标是始终拥有正常的网址。

有没有办法告诉 Angular 避开某些路线？像 aspnet MVC 中的 IgnoreRoute？

对不起，如果我太含糊了。根据我自己的理解，我只想找到一个将标准 aspnet mvc 与 angular 混合的工作概念，无论它被认为是好是坏。

【问题讨论】：

标签： asp.net-mvc angularjs routing

【解决方案1】：

使它工作的一个重要部分似乎是避免将 ng-app 分配给 html 元素。当 ng-app 较小时，它外面的部分不会受到路由的影响。

在此过程中存在一些潜在问题：

ng-app 不能嵌套。
只有第一个 ng-app 会自动引导。
后面的ng-app 改为这样添加：angular.bootstrap(element[, modules]);

http://docs.angularjs.org/api/ng.directive:ngApp
http://docs.angularjs.org/api/angular.bootstrap

当 ng-app 中有不应触发角度路由的链接时，可以通过添加 target="_self"（或任何目标属性）来避免。

有一个很好的 mvc4+angular+breeze 项目模板可供研究和测试。（至少需要 VS 2012 Update 2。）
http://www.asp.net/single-page-application/overview/templates/breezeangular-template

结论

通过在 html 页面中对应用程序进行分区，使某些部分不受路由影响，并在需要时排除 ng-app 中的各个链接，Asp.NET MVC 功能可以成功地与 AngularJS 混合。

【讨论】：

【解决方案2】：

看起来有一些方法可以使用 $location 服务来完成您的请求：

Conditionally have anchor links send user to a different page, rather than load to ng-view

【讨论】：

target 属性无助于管理表单帖子的问题。它确实适用于你的任意链接。