Question

我正在寻找一种方法来使用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页。如果我右键单击并尝试在新标签页中打开，我的页面会重新回到＆＃34; index.html＃！/ login＆＃34;，而不是＆＃34; index.html＃！/ page3＆＃34;。

Answer 1

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

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

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

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

Angular和ngRoute;在新窗口中打开

1 个答案: