Routing does not work well with HTML5-History-API

Question

In a mean-stack web application, I use html5mode and have the following code in index.html:

<base href="/" />   
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

I have defined the following angular-ui-router:

    .state('addinHome', {
        url: '/addin/home',
        template: "home page"
    })
    .state('addinTest', {
        url: '/addin/test',
        template: '<a href="addin/home">one</a>',
        controller: 'TestCtrl'
    })

Then, I go to https://localhost:3000/addin/test, clicking on one leads me to https://localhost:3000/addin/test#%2Faddin%2Fhome, whereas I would want to go to https://localhost:3000/addin/home.

If I don't have office.js and history.js, clicking on one does lead me to https://localhost:3000/addin/home.

Does anyone know how to go to https://localhost:3000/addin/home while keeping office.js and history.js?

Answer 1

I found it... just use

template: '<a href="addin/home" target="_self">one</a>'