How to trigger router's state on page load?

Question

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"
    })
})

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

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

edited May 23 '17 at 12:22

Community

1
1

answered Jun 20 '15 at 07:43

Radim Köhler

122,561
47
239
335

It works in your fiddle, but not in my code... I have added a controller to a state 'users' with debug message: console.log('yo') and it does not get displayed in console when loading this page in browser. I try to break your plunker, thanks :) – yaru Jun 20 '15 at 08:05
Ok, do you have more info? I'd suggest, try to "break my plunker" and I could assist, if you want... – Radim Köhler Jun 20 '15 at 08:06
Here's your "breaked" plunker: http://run.plnkr.co/nCVUSkQgKoF5iGHC#/users State won't get triggered until you add backslash to a URL like so: http://run.plnkr.co/nCVUSkQgKoF5iGHC/#/users Is adding this backslash is mandatory thing? – yaru Jun 20 '15 at 08:15
Here's preview: http://plnkr.co/edit/rRI7WQxwWmAYZh9iL3Ea?p=preview In Preview your code works because you change states after page already loaded. Try to launch a preview in a separate window, then change URL to delete backslash at the end( as in my examples earlier) and you will see it does not work... – yaru Jun 20 '15 at 08:22
I see now, what is your real issue. It is proper **server** configuration what is your problem. Maybe check this https://gist.github.com/frankgeerlings/1711560 for an example with .NET MVC. In a nutshell - you have to force (on a server) the browser to redirect to the app with slash. It is a must. That's how plunker (your app) is working (almost any web server with virtual applications. Without some server redirection (without slash to with slash) the angular application does not have correct access to relative path (it searches for xxxxxxxscript.js while it needs xxxxx/script.js) makes sense? – Radim Köhler Jun 20 '15 at 08:45

How to trigger router's state on page load?

1 Answers1

Angular - Dynamically Choose Starting State

Browser address will not be displayed correctly in ui-route