选择.state on page reload angularjs（使用angular-ui-router）

Question

我正在开发一个ASP.NET MVC 5应用程序。 我通过父页面中div角度'ui.router'加载局部视图。 路由工作很好，直到我刷新页面 - 部分视图加载到整个页面，但我希望它仍然作为部分加载。

这是我的代码。 父视图，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：

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：

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：

public ActionResult Customers()
{
    return View();
}

public ActionResult FirstPage()
{
    return View();
}

我的意见/建议/ Customers.cshtml：

<h2>Customer list</h2>

我希望我的问题很清楚。

编辑：

我按照本文的解决方案更改了RouteConfig.cs：

http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P

有这样的默认路线：

routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Proposal", action = "FirstPage" }

当我刷新一个路径与我的controller/action完全相同的页面时，它仍会在整个页面上加载该特定路径而不是部分路径。 如果我将.state url更改为其他页面刷新工作。 但是，如果我在URL中手动设置controller/action路径，它会在整个页面上显示视图而不是部分视图。

有办法避免这种情况吗？

Answer 1

您需要将ng-view更改为ui-view因为您正在使用angular $stateProvider而不是angular $routeProvider

HTML

<body>
    <h1>First Page</h1>
    <ul id="myMenu">
        <li ui-sref="customer">Customer</li>
    </ul>
    <div ui-view=""></div>
</body>

stateProvider应该是当前正在使用单个视图的更改，并且您将其声明为使用嵌套视图

配置

var myApp = angular.module("myApp", ['ui.router']);

var proposalConfig = function($stateProvider, $locationProvider, $urlRouterProvider) {

    $locationProvider.hashPrefix('!').html5Mode(true);

    $urlRouterProvider.otherwise('/Proposal/Customers'); //default redirection if no route matched

    $stateProvider.state('customer', {
        url: '/Proposal/Customers',
        templateUrl: '/Proposal/Customers',
        controller: 'someController' //if you want
    });

}

proposalConfig.$inject = ['$stateProvider', '$locationProvider'];

myApp.config(proposalConfig);

希望这可以帮助你，谢谢。

Answer 2

好吧，所以我猜你正在发生的事情是你在MVC应用程序中映射了一条路线，以便为你的角度应用程序提供相同的路线，在这种情况下，你在MVC路由器和Angular-UI中映射了“Proposal / Customers” -路由器。

所以发生的事情是，如果你已经在你的Angular应用程序中，Angular路由器具有控制权，当你四处导航时，它会将模板作为子模板加载并将HTML放入正确的位置。 刷新时，您正在将该路由发送到MVC路由器，并且它将HTML作为页面提供。

编辑

忘了提一下，这种情况正在发生，因为你已经打开了html5路由。