AngularJS路由和ASP.net MVC
问题描述:
我学的角度,我试图使用路线的第一次,但事情是不对的,这是行不通的:AngularJS路由和ASP.net MVC
这是我的主要观点(UsingDirectivesWithDataBinding .cshtml):
@{
Layout = null;
}
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular-route.js"></script>
<script type="text/javascript" src="~/Scripts/AngularFile.js"></script>
<title>
Using AngularJS Directives and Data Binding
</title>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="SimpleController">
<a href="#/view1"> View 1</a>
<a href="#/view2"> View 2</a>
<div data-ng-view=""></div>
</div>
</body>
</html>
正如你可以看到我有一个叫这条路两个链接:“#/视图2”或者这一个:“#/厂景”,但它带我去主页控制器的索引页面,而不是留在同一页面并显示我想要显示的部分视图。这是在家庭控制器的代码我有:
public ActionResult UsingDirectivesWithDataBinding()
{
return View();
}
public PartialViewResult View1()
{
return PartialView();
}
public PartialViewResult View2()
{
return PartialView();
}
这是我的JavaScript文件(AngularFile.js):
var app = angular.module("myApp", ["ngRoute"]);
app.controller("SimpleController", function ($scope) {
$scope.firstName = "John";
$scope.lastname = "Doe";
$scope.customers = [
{ name: "Dave Jones", city: "Phoenix" },
{ name: "Jamie Riley", city: "Atlanta" },
{ name: "Heedy Rowt", city: "Memphis" },
{ name: "Thomas Winter", city: "Seattle" }
];
});
app.config(function ($routeProvider) {
$routeProvider.when("/view1", {
templateUrl: "/Home/View1",
controller: "SimpleController"
})
.when("/view2", {
templateUrl: "/Home/View2",
controller: "SimpleController"
})
.otherwise({redirectTo : "/view1"})
})
为什么不工作?
答
角1.6采用了全新的hashPrefix,在你的HREF尝试改变视图1#/到#!/厂景。
答
我认为你是服务器端(ASP.net)路由和客户端(Angular.js)路由之间的混淆。不知道您是否试图从ASP.net呈现视图并将其提供给角路由器。如果是的话,那么不幸的是,这是行不通的。 Angular路由器不会进行服务器调用来获取视图。该视图必须在客户端作为模板(HTML静态文件)随时可用,角度将在模板上呈现数据(在从API中获取后)。
所以基本上这条线templateUrl: "/Home/View1"
将成为templateUrl: "/Home/View1.html"
其中View1.html是一个静态文件(角模板)。
有关详细信息检查了这一点>AngularJs routing with Asp.Net Mvc
的可能的复制[URL哈希爆炸(#!/)前缀,而不是简单的哈希(#/)](http://*.com/questions/41226122/URL哈希爆炸前缀代替-的-简单散列) – Mistalis