AngularJS与模板

Question

MVC应用程序的路由我有3个MVC控制器：

• 仪表板（一种默认）
• 客户
• 员工 对于每一个，只有“指数”行动是可用只有“索引”视图。

在布局，我有3项一个简单的菜单：“仪表板”，“客户” 和“雇员”（@Html.ActionLink("Dashboard", "Index", "Dashboard")）

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

不，我添加了3个angularjs控制器（“/ App/Controllers/CustomerController”，...），这些控制器已被添加到一个包中。在布局页面中，有一个指向这个包的链接。

对于仪表板视图/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的“索引” “仪表板”，但URL的样子：

http://localhost:2638/#/dashboard 

我点击“雇员”的链接，我看到合适的内容，但该网址看起来像：

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

我点击“客户”的链接，我看到合适的内容，但该网址的样子：

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

我短声“客户名单”，我看到了模板的内容，但该网址看起来像：

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

我短声“详细信息”，我看到了模板的内容，但该网址看起来像：

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

所有内容都是正确的行为也是如此，网址是怪（即使我可以住在一起）。

我绑应用于：$locationProvider.html5Mode(true);并删除我的菜单中的＃但是在这种情况下， 时，点击“客户名单”，因为“/客户/列表”动作在MVC控制器缺少我得到一个错误。 我想只有索引文件。

当我在路由中删除，否则部分，从菜单中的URL“更好看”：

http://localhost:2638/Employee 

在App.js文件I设置路由见下文。

我该如何解决这个问题？

路由：

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页面并提供访问日期的界面（例如，如下所述：https://stackoverflow.com/a/16837181/639035 ）。

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

MVC页概念（traditionell conecpt） Anglular页概念（或单页应用（SPA）的概念）