在页面重新加载angularjs（使用angular-ui-router）上选择.state答案

【问题标题】：Select .state on page reload angularjs(using angular-ui-router)在页面重新加载angularjs（使用angular-ui-router）上选择.state
【发布时间】：2016-06-13 22:23:43
【问题描述】：

我正在开发一个 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 路径，它会在整个页面上显示一个视图，而不是作为部分视图。

有没有办法避免这种情况？

【问题讨论】：

标签： asp.net-mvc angularjs angular-ui-router

【解决方案1】：

您需要将ng-view 更改为ui-view，因为您使用的是角度$stateProvider 而不是角度$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);

希望对你有帮助，谢谢。

【讨论】：

我在这里打错了...在我的解决方案中，我有 ui-view 但它不起作用。

【解决方案2】：

好的，所以我猜正在发生的事情是您在 MVC 应用程序中映射了一个路由，以提供与您的 Angular 应用程序相同的路由，在这种情况下，您在 MVC 路由器和您的Angular-UI-Router。

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

编辑

忘了说，这是因为你打开了 html5 路由。

【讨论】：

是的，我知道问题出在哪里，但我不知道解决方法。：）你知道吗？ :)
我知道的唯一解决方案是强制映射到您的 MVC 路由中的 AngularJS 起点（即更改您的 MVC 路由）或不在您的 AngularJS 应用程序中使用 HTML5 路由。如果你使用 # 符号，MVC 会自动忽略它。如果有不同的解决方法，我目前不知道。也许对 MVC 路由映射有一些复杂知识的人可以推荐一个可行的解决方案。