How to mix links that trigger page refresh with Angular html5Mode = true without breaking the back button?

Question

I will pass through a problematic stream ...

• Download google.com (as a starting point)
• I switched app.com
• Navigator app.com/projects
• Navigation for app.com/api/test (via window.location)
• I see raw JSON (ok so far ...)
• I push back, the URL changes to app.com/projects , but I still see JSON.
• I will come back again, the url will change to app.com , but I still see JSON.
• I'll be back again, google.com is loading.
• I push forward, app.com loads normally ... everything returns to normal

What is strange, I noticed this only when html5Mode = true in Webkit-firefox works as desired ...

.,.

First my server.coffee looks like this:

 app.get '/partials/:partial', routes.partials app.get '/api/test', api.test app.get '*', routes.index 

Basically, all requests load the index (which Angular loads), with the exception for the view / partial handler, and the api test route, which responds using raw JSON.

.,.

(I use the ui-router module to manage nested views and user interface states, it uses $urlRouterProvider , which is very similar to Angular $routeProvider )

Secondly, app.coffee looks like this:

 app = angular.module('app', ['ui-router']) .config([ '$stateProvider' '$locationProvider' '$urlRouterProvider' ($stateProvider, $locationProvider, $urlRouterProvider)-> $urlRouterProvider .when('/api/test', [ '$window' '$location' ($window, $location)-> $window.location.href = '/api/test' ]) .otherwise('/') $stateProvider .state 'home', url: '/' templateUrl: 'partials/index' controller: 'IndexCtrl' .state 'projects', url: '/projects' templateUrl: 'partials/projects' controller: 'ProjectsCtrl' $locationProvider.html5Mode(true).hashPrefix '!' ]) 

Since everything is asynchronous, I had to use $window to access window.location.href to start the page refresh so that the server processes the route.

So my question is, can I mix links that trigger page refresh using Angular html5Mode without breaking the back button? Is this just a Webkit bug and / or is there a better way to do this?

Ideally, I will have an application that works with Angular, but things like the "about" or "contact" page (which should not be dynamic or asynchronous) will be served directly from the server using regular page updates ...

Help!

Answer 1

Two options:

• If you use <a /> tags, specify target="_self" so that AngularJS knows that it should not capture its clicks (these links will be processed by the browser in normal mode). This is not a hack; this is normal documented behavior.
• Use $window.location = 'foo' as you did. It is acceptable.