.STATE选择在页面重载angularjs（采用了棱角分明的UI路由器） [英] Select .state on page reload angularjs(using angular-ui-router)
问题描述
我开发一个ASP.NET MVC 5应用程序。我通过父页角'ui.router 在 DIV 加载的局部视图。路由是伟大的工作，直到我刷新页面 - 不是局部视图加载整个页面上，但我希望它仍然加载为局部
I am developing a ASP.NET MVC 5 application. I am loading a partial view through angular 'ui.router' on a div in a parent page. Routing is working great until I refresh the page - than a partial view is loading on a whole page but I want it to still load as a partial.
这是我的code。父视图，FirstPage.cshtml：
This is my code. A parent view, FirstPage.cshtml:
<html ng-app="myApp">
<head>
<base href="/">
<title>First Page</title>
<script src="/Scripts/Angular/angular.js"></script>
<script src="/Scripts/Angular/angular-ui-router.js"></script>
<script src="/Scripts/app.js"></script>
</head>
<body>
<h1>First Page</h1>
<ul id="myMenu">
<li ui-sref="customer">Customer</li>
</ul>
<div ui-view="containerOne"></div>
</body>
</html>
这是我的app.js：
This is my app.js:
var myApp = angular.module("myApp", ['ui.router']);
var proposalConfig = function ($stateProvider, $locationProvider) {
$locationProvider.hashPrefix('!').html5Mode(true);
$stateProvider
.state('customer', {
url: 'Proposal/Customers',
views: {
"containerOne": {
templateUrl: '/Proposal/Customers'
}
}
});
}
proposalConfig.$inject = ['$stateProvider', '$locationProvider'];
myApp.config(proposalConfig);
我RouteConfig.cs：
My RouteConfig.cs:
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "ProposalCustomers",
url: "Proposal/Customers",
defaults: new { controller = "Proposal", action = "Customers" });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
我ProposalController.cs：
My ProposalController.cs:
public ActionResult Customers()
{
return View();
}
public ActionResult FirstPage()
{
return View();
}
我的意见/建议/ Customers.cshtml：
My Views/Proposal/Customers.cshtml:
<h2>Customer list</h2>
我希望我的问题是清楚的。
I hope my problem is clear.
编辑：
我改变了我的RouteConfig.cs从本文的解决方案如下：
I changed my RouteConfig.cs following the solution from this article:
的http://www.$c$cproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P
有这样一条默认路由：
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Proposal", action = "FirstPage" }
当我刷新刚好有喜欢我的控制器/动作路线的页，它仍然会加载整个页面，而不是作为一个部分的具体路线。如果我改变.STATE 网址到别的页面刷新工作。但仍然，如果我把一个手动在URL中的控制器/动作路径，它显示了整个页面，而不是作为一个部分一个视图。
When I refresh a page that has a route exactly like my controller/action, it still loads that specific route on a whole page instead as a partial. If I change a .state url to something else page refresh is working. But still if I put manually a controller/action path in the URL, it shows a view on a whole page instead as a partial.
有没有办法避免这种情况？
Is there a way to avoid this?
推荐答案
好了，所以我猜发生的事情是你在你的MVC应用程序映射路由服务于相同的路线作为您的应用程序的角度，在这种情况下，你映射的建议书/客户对你的MVC路由器和您的角-UI-路由器。
Ok, so what I'm guessing is happening is you mapped a route in your MVC application to serve the same route as your angular application, in this instance, you mapped 'Proposal/Customers' in your MVC router and in your Angular-UI-Router.
所以发生的是，如果你在你的应用程序角已经是，角路由器的控制和您浏览周围，它加载的是模板作为子模板，并把HTML到正确的位置。当您刷新，你发送的MVC路由器的路由，虽然，它服务于作为HTML页面。
So what is happening is that if you're already in your Angular application, the Angular router has control and as you navigate around, it is loading the template as a child template and putting the HTML into the correct location. When you refresh, you're sending that route to the MVC router, though, and it's serving the HTML as the page.
的修改的
忘了提，这是发生，因为你已经有了HTML5路由开启。
Forgot to mention, this is happening because you've got html5 routing turned on.
这篇关于.STATE选择在页面重载angularjs（采用了棱角分明的UI路由器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
