How to trigger router's state on page load?

1.4k Views Asked by At

In my app I have this server-generated link: http://localhost:3000/people#/users

When I click on it I get redirected to the following HTML page with Angular UI-Router script:

<a ui-sref="users">Users</a>      
<a ui-sref="invitations">Invitations</a>       
<div ui-view></div>

The problem is - users state does not get triggered automatically on page load. I need to manually click on it and only then the corresponding UI-Router state gets triggered.

Here's my config file:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('users', {
      url: "/users",
      templateUrl: "assets/partials/users.html"
    })
})
1

There are 1 best solutions below

5
On BEST ANSWER

There is a working plunker

  $urlRouterProvider.otherwise('/users');

  // States
  $stateProvider
    .state('users', {
      url: "/users",
      templateUrl: "assets/partials/users.html"
    });

The $urlRouterProvider.otherwise('/users'); will redirect to defined page when none is provided

This links in index.html will work as well

  href
  <a href="#/users">
  ui-sref      
  <a ui-sref="users">

Check it here

If that should be more dynamic, please check the:

Angular - Dynamically Choose Starting State

In case, that our issue is that application is working with this init page:

http://domain/app/

but not without the trailing slash

http://domain/app

We have to do some redirection on a server. (Redirection is needed to make all the relative path properly working) there are some how to with asp.net mvc

Browser address will not be displayed correctly in ui-route