Angular 和 ngRoute；在新窗口中打开答案

【问题标题】：Angular and ngRoute; Open in New WindowAngular 和 ngRoute；在新窗口中打开
【发布时间】：2015-11-29 16:09:33
【问题描述】：

我正在寻找一种使用 ngRouting 在新窗口中打开模板的方法。我在我的索引页面中设置了一个 ng-view div，它允许我在我的中心页面中填充数据，但是如果用户选择在新窗口/选项卡中打开一个链接，页面返回 404，因为它是期望 ngRoute 加载它的控制器和模板。有什么方法可以让 Angular 处理这个选项？

下面是我的索引页

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>

<body ng-controller="routeController" ng-init="init()">
    <div id="wrapper" class="page"> 
        <ul id='settingsLink' class='settingsLink' ng-mouseleave="hideSettingsLink()">
            <li><a href="index.html#!/login">Login</a></li>
            <li><a href="index.html#!/page2">Page 2</a></li>
            <li><a href="index.html#!/page3">Page 3</a></li>
        </ul>
        <div id="viewcontent">
             <div ng-view></div>
        </div>
    </div>
</body>

这是我的 routeController 配置代码：

angular.module('myApp').config(function($routeProvider, $locationProvider, $sceDelegateProvider){

       $routeProvider

       // route for the Login page
       .when('/login', {
           templateUrl : 'pages/login.html',
           controller  : 'AuthenticateController'
       })

       // route for page 2
       .when('/page2', {
           templateUrl : 'pages/page2.html',
           controller  : 'Page2Ctrl'
       })

       // route for page 3
       .when('/page3', {
           templateUrl : 'pages/page3.html',
           controller  : 'Page3Ctrl'
       });

       $locationProvider
       .html5Mode(false)
       .hashPrefix('!');
   });

假设我要打开第 3 页。如果我右键单击并尝试在新选项卡中打开，我的页面将解析回“index.html#!/login”，而不是“index.html#!/第 3 页”。

【问题讨论】：

请添加您尝试过的代码。这个问题太笼统了。仅供参考，Angular 需要在新窗口中加载和运行。

标签： angularjs angularjs-routing ngroute angularjs-ng-route

【解决方案1】：

如果您在 HTML5Mode 中使用 ngRoute，则 URL 中不会有哈希，服务器会认为您正在尝试访问文件，而实际上您正在获取 Angular 视图。您需要使用 hashbang 模式来解决此问题。在您配置路线的地方（使用$routeProvider），添加以下内容：

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

现在在您的链接中，添加哈希：

<a href="#!/path">link</a>

【讨论】：

这可以防止新页面出现 404 错误，但它似乎不正确地将我的页面重定向到我在 Init 函数中设置的页面，而不是我实际尝试打开的模板。
您可以尝试完全删除 $locationProvider 并告诉我会发生什么吗？
无论我尝试打开哪个页面，这似乎都会将我重定向到我的登录页面。我在参考文献中将符号保留为“#!/page3”。