asp.net-mvc – 使用Asp.Net Mvc进行AngularJs路由

发布时间：2020-12-16 07:20:13 所属栏目：asp.Net 来源：网络整理

导读：我正在尝试使用Asp.Net MVC构建SPA.为此,我正在使用angularJs路由. 这是我的项目层次结构. ? 我的Layout.cshtl代码 html lang="en" ng-app="ProjectTrackingModule" head script src="~/Scripts/jquery-2.1.0.min.js"/script script src="~/Scripts/angular.

我正在尝试使用Asp.Net MVC构建SPA.为此,我正在使用angularJs路由.
这是我的项目层次结构.
?

我的Layout.cshtl代码

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng﹙iew style="margin﹍eft: 10%; margin﹔ight: 10%;">
    </div>
//... footer
</body>
</html>

我的app.Js代码如下：

var app = angular.module('ProjectTrackingModule',['ngRoute','ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home",{
        templateUrl: "/Views/Home/Home.cshtml",controller:"HomeController"
    })
    .when("/Projects",{
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

我想在ng-view中加载我的Home.Cshtml局部视图.但是当我运行我的应用程序时,它只显示Home部分视图.

当我点击Project时,它应该在ng-view中渲染ProjectDetails.cshtml.

ProjectDetails.cshtml中的代码

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>

解决方法

我认为你对Angularjs路由概念有一些看法.

MVC路由：

ASP.NET routing enables you to use URLs that do not have to map to specific files in a Web site. Because the URL does not have to map to a file,you can use URLs that are descriptive of the user’s action and therefore are more easily understood by users.

角度路由：

使用MVC框架的Angular.js路由不使用MVC路由.

可比较的部分是：

Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

所以你不能在angularjs route config中调用MVC Controller.这有意义吗？

另外请考虑一下cshtml和html之间的一些区别.

角度路由和MVC路由完全不同,因为：

>角度路由是使用客户端
> MVC路由使用服务器端

以上文本仅供您参考.

我认为这个讨论会对你有所帮助：

How to use ASP.NET MVC and AngularJS routing?

更新：

锚点标记中的href错误.

它应该是href =“#/ Home”,而不是href =“#Home”

所以请更改您的代码

<a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!