MVC应用程序中的AngularJS路由与模板

Question

我有3个MVC控制器：

• 仪表板（默认情况下为一个）
• 客户
• 员工 对于每一个，只有＆＃34;索引＆＃34;只有＆＃34;索引＆＃34;图。

在布局中，我有一个包含3个条目的简单菜单：＆＃34;仪表板＆＃34;，＆＃34;客户＆＃34; 和＆＃34;员工＆＃34; （@Html.ActionLink("Dashboard", "Index", "Dashboard")）

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

不，我添加了3个angularjs控制器（＆＃34; / App / Controllers / CustomerController＆＃34;，...）这些控制器已被添加 捆绑。在布局页面中，有一个指向此包的链接。

对于信息中心视图/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）时，我点击了MVC＆＃34;索引＆＃34; ＆＃34;仪表板＆＃34;，但URL看起来像：

http://localhost:2638/#/dashboard

我点击＆＃34;员工＆＃34;链接，我看到正确的内容，但URL看起来像：

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

我点击＆＃34;客户＆＃34;链接，我看到正确的内容，但URL看起来像：

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

我clik＆＃34;列出客户＆＃34;，我看到了模板内容，但网址如下：

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

我clik＆＃34;详细信息＆＃34;，我看到模板内容，但网址如下：

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

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

我绑定使用了：$locationProvider.html5Mode(true);并删除了我的菜单中的＃，但是在此处 点击＆＃34;列出客户＆＃34;我收到错误，因为＆＃34; / Customer / List＆＃34; MVC控制器中缺少操作。 我只喜欢索引文件。

当我删除路由中的其他部分时，菜单中的URL＆＃34;看起来更好＆＃34; ：

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应用程序使用相同的路由，您必须决定其中一个概念。

这意味着您要么为我们提供高级客户端UI功能（如过滤），要么完全在服务器上进行路由，要么只提供一个MVC页面并提供访问日期的界面（例如，如下所述：{{ 3}}）。

对AngularJS和MVC使用相同的路由意味着您必须实现一个返回视图的Controller（完整的HTML页面），以及一个为AngularJS路由提供JSON数据的控制器。这导致了很多工作，不易维护，据我所知它没有任何优势。

MVC页面概念（traditionell conecpt） Anglular Page概念（或单页应用程序（SPA）概念）