Can I use href with urlRouterProvider?

Question

In my angularjs app I have replaced ngRoute (routeProvider) with ui.router (urlRouterProvider) module and stateProvider to navigate between states within my app.

Now I find out that ui-router only works with states and <a ui-sref=""> instead of <a href=""> . As I have to set the application navigation outside of my app by using javascript, I can not change the anchors from href to sref. Here's how I set navigation links.

    Portal.setNavigation(
        [
            {
                "label": "Application1",
                "selected": true,
                "url": "/web/guest#/Application1"
            }
        ]
    );

This code set's the href attributes accordingly. Here is my stateProvider snippet, which works on manually placed srefs like this one: <a ui-sref="Application1">Application State 1</a>

app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('Application1', {
            url: '/Application1',
            templateUrl: '/Application.html',
            controller: 'AppCtrl'
        });
}]);

Any ideas how I can continue using ui-router AND using hrefs to navigate through states?

Answer 1

If you are navigating outside of your application through javascript by doing something like window.location(url), you should be able to to put your state's route in the url and the router should be able to handle the route ie window.location(/state1).

Here's the text from the ui-router that sheds some light on this ( link ):

Here's how you set a basic url.

 $stateProvider .state('contacts', { url: "/contacts", templateUrl: 'contacts.html' }) 

Now when the user accesses index.html/contacts then the 'contacts' state would become active and the main ui-view will be populated with the 'contacts.html' partial.