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屋!