AngularJs 路由与 Asp.Net Mvc [英] AngularJs routing with Asp.Net Mvc
问题描述
我正在尝试使用 Asp.Net MVC 构建 SPA.为此，我正在使用 angularJs 路由.这是我的项目层次结构.
我的 Layout.cshtl 代码
<头><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><身体><a href="#Home">首页</a><a href="#Projects">项目</a><div ng-view style="margin-left: 10%; margin-right: 10%;">//...页脚</html>
我的 app.Js 代码如下:
var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);app.config(function ($routeProvider) {$routeProvider.when("/家", {templateUrl: "/Views/Home/Home.cshtml",控制器:家庭控制器"}).when("/项目", {templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",控制器:项目控制器"}).otherwise({redirectTo:"/Home"})});我想在 ng-view 中加载我的 Home.Cshtml 部分视图.但是当我运行我的应用程序时，它只显示主页部分视图.
同样，当我点击 Project 时，它应该在 ng-view 中呈现 ProjectDetails.cshtml.
ProjectDetails.cshtml 中的代码
<h2>项目详情</h2>我认为您对 Angularjs 路由概念存在一些误解.
MVC 路由:
<块引用>ASP.NET 路由使您能够使用不必映射到网站中特定文件的 URL.由于 URL 不必映射到文件，因此您可以使用描述用户操作的 URL，因此用户更容易理解.
角度路由:
使用 MVC 框架的 Angular.js 路由不使用 MVC 路由.
可比较的部分是:
模型 ===== ng-module控制器 ===== ng-控制器视图 ===== ng-view所以你不能在你的 angularjs 路由配置中调用 MVC 控制器.这有意义吗?
另外请考虑一下 cshtml 和 html 之间的一些区别.
Angular 路由和 MVC 路由完全不同，因为:
- Angular 路由是使用客户端
- MVC 路由用于服务器端
以上文字仅供您理解.
我认为这个讨论会对你有所帮助:
如何使用 ASP.NET MVC 和 AngularJS 路由?
更新:
Anchor 标签中的 href 错误.
它应该是 href="#/Home"，而不是 href="#Home"
所以请更改您的代码
<a href="#/Home">Home</a><a href="#/Projects">项目</a>I'm trying to build a SPA with Asp.Net MVC. for this I'm using angularJs routing . This is my project hierarchy.
My Layout.cshtl code
<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‐view style="margin‐left: 10%; margin‐right: 10%;">
</div>
//... footer
</body>
</html>
My app.Js code is as follow:
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"})
});
I want to load my Home.Cshtml partial view inside ng-view. But when I run my application, It only showing Home partial view.
also when I click on Project, then it should render ProjectDetails.cshtml inside ng-view.
code inside ProjectDetails.cshtml
<div ng-controller="ProjectsController">
<h2>ProjectDetails</h2>
</div>
I think you have some misonceptions about Angularjs routing concepts.
MVC Routing :
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.
Angular Routing :
Angular.js routing using MVC framework does not use MVC routing.
Comparable parts are:
Model ===== ng-module
controller ===== ng-controller
view ===== ng-view
So you can't call the MVC Controller in your angularjs route config. Does this make sense?
Also please think about some of the differences between cshtml and html.
Angular routing and MVC routing are totally different because:
- Angular routing is use client side
- MVC routing is used server side
The above texts are for your understanding only.
I think this discussion will help you :
How to use ASP.NET MVC and AngularJS routing?
Update :
The href is wrong in Anchor tag.
Its should be href="#/Home", not href="#Home"
So please change your code
<a href="#/Home">Home</a>
<a href="#/Projects">Projects</a>
这篇关于AngularJs 路由与 Asp.Net Mvc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
