-2

I'm looking for a way to use ngRouting to open a template in a new window. I have an ng-view div set up in my index page that allows me to populate the data in my central page, but if the user chooses to open a link in a new window/tab, the page comes back 404, since it is expecting to have ngRoute to load it's controllers and templates. Is there any way to allow Angular to handle this option?

Below is my index page

<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>

And here is my routeController config code:

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('!');
   });

Let's say I want to open Page 3. If i right-click and try to open in a new tab, my page resolves back to "index.html#!/login", instead of "index.html#!/page3".

user1327704
  • 1
  • 2
  • Please add the code you have tried. This question is too broad. FYI, Angular will need to be loaded and running on the new window. – pherris Sep 03 '15 at 17:42

1 Answers1

0

If you're using ngRoute in HTML5Mode, you won't have a hash in the URL and the server will think you're trying to access a file when in reality you're getting an Angular view. You need to use hashbang mode to fix this. In the place where you configure your routes (with $routeProvider), add this:

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

Now in your links, add the hash:

<a href="#!/path">link</a>
nathanhleung
  • 506
  • 6
  • 14
  • This prevents the new page from 404-ing, but it seems to improperly redirect my page to the one I set in my Init function, and not to the template I'm actually trying to open. – user1327704 Sep 04 '15 at 11:39
  • Can you try removing the $locationProvider completely and tell me what happens? – nathanhleung Sep 04 '15 at 15:34
  • That seems to redirect my back to my login page regardless of what page I try to open. I left the notation as "#!/page3" in my references. – user1327704 Sep 08 '15 at 12:59