gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 12:38:03 26 4
gpt4 key购买 nike

我有 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);
}]);

最佳答案

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) Das klassische Web-Paradigma Angular 页面概念(或单页应用程序 (SPA) 概念) Single Page Application (SPA) Framework

关于.net - 带有模板的 MVC 应用程序中的 AngularJS 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27766790/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com