AngularJs与Asp.Net路由的mvc路由、Asp、AngularJs、mvc
我试图建立与Asp.Net MVC的水疗中心。为此我使用angularJs路由。这是我的项目层次。
我Layout.cshtl code
＆LT; HTML LANG =ENNG-应用=ProjectTrackingModule＆GT; ＆LT; HEAD＆GT; ＆LT;脚本SRC =〜/脚本/ jQuery的-2.1.0.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/ angular.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/角route.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =〜/脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;身体GT;＆LT; A HREF =＃首页＆GT;家庭和LT; / A＆GT;＆LT; A HREF =＃项目＆GT;项目和LT; / A＆GT; ＆LT; DIV NG-视图样式=保证金左：10％;保证金右：10％;＆GT; ＆LT; / DIV＆GT;// ...页脚＆LT; /身体GT;＆LT; / HTML＆GT; 我app.Js code是如下：
VAR应用= angular.module（'ProjectTrackingModule'，['ngRoute'，'ui.bootstrap']）;的app.config（函数（$ routeProvider）{ $ routeProvider 。当（/家，{ templateUrl：/Views/Home/Home.cshtml 控制器：HomeController的 }） 。当（/项目，{ templateUrl：/Views/ProjectManagement/ProjectDetails.cshtml 控制器：ProjectsController }） 不然的话（{redirectTo：/家庭}）}）; 我要加载NG-视图中我的 Home.Cshtml局部视图即可。但是，当我跑我的应用程序，它只显示主页的局部视图。
还当我点击项目，那么它应该呈现的 ProjectDetails.cshtml 的内部NG-视图。
里面ProjectDetails.cshtml code
＆LT; DIV NG控制器=ProjectsController＆GT; ＆LT; H2＆GT; ProjectDetails＆LT; / H＆GT;＆LT; / DIV＆GT; 
解决方案
我觉得你有关于Angularjs路由概念有些misonceptions。
MVC路由：
ASP.NET路由使您可以使用不具有映射到特定的文件在网站的URL。由于URL不必映射到一个文件，你可以使用那些描述用户的行为，因此更容易被用户理解的URL。
角路由：
Angular.js路由使用MVC框架不使用 MVC 路由。
可比部分是：
型号=====纳克模块控制器===== NG-控制器查看===== NG-视图 所以你不能调用MVC控制器在 angularjs 路由配置。这是否有意义？
另外，请想想一些 CSHTML 和 HTML 。
角路由和路由MVC是完全不同的，因为：
角路由使用客户端 MVC路由使用的服务器端以上文字，只有你能理解。
我觉得这个讨论将帮助您：
如何使用ASP.NET MVC和AngularJS路由？
更新：
的的href 是错误的定位标记。
它应该是的href =＃/家，而不是的href =＃家
所以，请改变你的code
＆LT; A HREF =＃/家庭＆GT;家庭和LT; / A＆GT; ＆LT; A HREF =＃/项目＆GT;项目和LT; / A＆GT; 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 sideThe 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>
