AngularJS 使用模板在 MVC 应用程序中进行路由

Question

我有 3 个 MVC 控制器：

仪表板（默认的那个）
客户
员工对于每个，只有 "Index" 操作仅适用于 "Index" 视图。

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

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

不，我添加了 3 个 angularjs 控制器 ("/App/Controllers/CustomerController",...) 这些控制器已添加到一个包。在布局页面中，这个包有一个 link。

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

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

对于员工视图 /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) 时，我点击了 "Dashboard" 的 MVC "Index"，但是 URL 看起来像：

http://localhost:2638/#/dashboard

我点击 "Employee" link，我看到了正确的内容，但是 URL 看起来像：

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

我点击 "Customer" link，我看到了正确的内容，但是 URL 看起来像：

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

我点击 "List Customer"，我看到了模板内容，但是 URL 看起来像：

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

我点击了 "Detail"，我看到了模板内容，但是 URL 看起来像：

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

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

我使用了 : $locationProvider.html5Mode(true); 并在我的菜单中删除了 # 但在这个单击 "List customers" 时出现错误，因为 MVC 控制器中缺少“/Customer/List”操作。我只想在索引文件上。

当我删除路由中的其他部分时，菜单中的 URL "look better" :

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 页面并提供访问接口您的约会对象（例如此处所述：）。

对 AngularJS 和 MVC 使用相同的路由意味着您必须实现一个控制器，其中 returns 视图（完整的 HTML 页面），以及一个提供 returns 页面的控制器=29=] AngularJS 路由的数据。这导致大量工作，不易维护，据我所知，它没有提供任何优势。

MVC 页面概念（传统概念）角度页面概念（或单页应用程序 (SPA) 概念）

AngularJS 使用模板在 MVC 应用程序中进行路由

AngularJS routing in MVC application with templates

.net

asp.net-mvc

routing

angularjs