.net - 带有模板的 MVC 应用程序中的 AngularJS 路由

Question

我有 3 个 MVC Controller :

• 仪表板(默认情况下)
• 客户
• 员工 对于每个，只有“索引”操作可用于只有“索引” View 。

在布局中，我有一个包含 3 个条目的简单菜单:“Dashboard”、“Customer” 和“员工”(@Html.ActionLink("Dashboard", "Index", "Dashboard"))

没问题，我可以通过菜单更改 View 。

不，我添加了 3 个 angularjs Controller (“/App/Controllers/CustomerController”，...)这些 Controller 已添加 到一个包。在布局页面中，有指向此包的链接。

对于仪表板 View /Views/Dashboard/Index.cshtml，我有这个:

<div ng-controller="DashboardController" ng-cloak>
    <div ng-view></div>
</div>

对于员工 View /Views/Employee/in Index.cshtml，我有这个:

<div ng-controller="EmployeeController" ng-cloak>
    <div ng-view></div>
</div>

对于 /Views/Customer/Index.cshtml :

<ul class="nav navbar-nav">
    <li><a href="#/Customer/List">List customers</a></li>
    <li><a href="#/Customer/5">Detail</a></li>
</ul>
<div ng-controller="CustomerController" ng-cloak>
    <!-- this is where content will be injected -->
    <div ng-view></div>
</div>

当我启动应用程序 (F5) 时，我点击了“仪表板”的 MVC“索引”，但 URL 看起来像:

http://localhost:2638/#/dashboard

我点击“员工”链接，我看到了正确的内容，但 URL 看起来像:

http://localhost:2638/Employee#/dashboard

我点击“客户”链接，我看到了正确的内容，但 URL 看起来像:

http://localhost:2638/Customer#/dashboard

我点击“列出客户”，我看到了模板内容，但 URL 看起来像:

http://localhost:2638/Customer#/Customer/List

我点击“详细信息”，我看到了模板内容，但 URL 看起来像:

http://localhost:2638/Customer#/Customer/5

所有内容也都是正确的行为，URL 很奇怪(即使我可以忍受)。

我绑定(bind)到 used : $locationProvider.html5Mode(true); 并删除我菜单中的 # 但在这个 单击“列出客户”时出现错误，因为 MVC Controller 中缺少“/Customer/List”操作。 我只想在索引文件上。

当我删除路由中的其他部分时，菜单中的 URL“看起来更好”:

http://localhost:2638/Employee

在 App.js 文件中，我设置了路由，如下所示。

我该如何解决这个问题？

路由:

myAppModule.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
    .when('/Employee/List', {
        templateUrl: 'App/Templates/Employee/List.html',
        controller: 'MyEmployeeController',
        caseInsensitiveMatch: true
    })
    .when('/Employee/:id?', {
        templateUrl: 'App/Templates/Employee/Detail.html',
        controller: 'MyEmployeeController',
        caseInsensitiveMatch: true
    })
    .when('/Customer/List', {
        templateUrl: 'App/Templates/Customer/List.html',
        controller: 'MyCustomerController',
        caseInsensitiveMatch: true
    })
    .when('/Customer/:id?', {
        templateUrl: 'App/Templates/Customer/Detail.html',
        controller: 'MyCustomerController',
        caseInsensitiveMatch: true
    })
    .otherwise({
        redirectTo: '/dashboard'
    });

    //$locationProvider.html5Mode(true);
}]);

Answer 1

AngularJS 加载页面一次，然后仅从服务器加载缺失的数据(作为 JSON 数据)。 MVC 在每次请求时加载完整页面。

基于此，您不能为 MVC 和 AngularJS 应用程序使用相同的路由，您必须决定其中一个概念。

这意味着您要么使用 Angular 来获取高级客户端 UI 功能(如过滤)并完全在服务器上进行路由，要么您只提供一个 MVC 页面并提供用于访问您的日期的接口(interface)(例如，如此处所述:https://stackoverflow.com/a/16837181/639035) .

对 AngularJS 和 MVC 使用相同的路由意味着您必须实现一个返回 View (完整的 HTML 页面)的 Controller ，以及一个为 AngularJS 路由提供 JSON 数据的 Controller 。这导致大量工作，不易维护，而且据我所知，它没有提供任何优势。

MVC 页面概念(traditionell conecpt) Angular 页面概念(或单页应用程序 (SPA) 概念)