Angular Ui-Router $Urlrouterprovider .When Not Working When I Click <A Ui-Sref="...">

Angular UI-Router $urlRouterProvider .when not working when I click a ui-sref=...

There is a new working plunker (extending the Angular UI-Router $urlRouterProvider .when not working *anymore*), which should be working with the version 0.2.13+

Previous solution

Until version 0.2.12- we could use $urlRouterProvider.when(), suggested in documenation (small cite):

How to: Set up a default/index child state

...

if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:

 $urlRouterProvider.when('/home', '/home/index');

So this was solution shown in the Q & A mentioned above:

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig) 

Now - we cannot.

UI-Router "FIX" in 0.2.13

It is due to "FIX" (which I am simply not sure about), mentioned in the release 0.2.13

Bug Fixes
$state:
- ...

- Avoid re-synchronizing from url after .transitionTo (b267ecd3, closes #1573)

And here is the new code added in the urlRouter.js:

if (lastPushedUrl && $location.url() === lastPushedUrl)
 // this line stops the corrent .when to work
 return lastPushedUrl = undefined;

lastPushedUrl = undefined;

This piece of code is optimizing/fixing some other issue ... but also, turning off the .when() functionality

SOLUTION

As already mentioned, this brand new plunker shows the way with version 0.2.13+. We just have to listen to state change, and if the state is "app.list" we can go to its detail with some id...

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "app.list") { 
      event.preventDefault();
      $state.go('app.list.detail', {id: 2});
    }
  });

}]

Check the plunker here

Angular UI-Router $urlRouterProvider .when not working *anymore*

EDIT: version 0.2.13 - breaking change

The original post was working with the UI-Router 0.2.12-. A fix in 0.2.13 disables this solution. Please follow the workaround here:

Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

ORIGINAL:

There is one issue, I found, causing similar issue. There is a working example with full code

Firstly, let's have two functions to configure

• $urlRouterProvider and
• $stateProvider

The snippet of these defintions:

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

Having this, the reported behaviour will hapen if we will call them like this:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig) 

The above call will not work. When will not trigger the detail state when list is visited.

But this will work as expected:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

Check it here. See the app.js file...

SUMMARY: We simply have to firstly configure the $urlRouterProvider. Only then we can start to fill in our states via $stateProvider. This approach will lead to expected behaviour.

How can I reload the same page twice when I click 'ui-sref' by angular-ui-router

Probably the cleaner approach would be the following :

<a data-ui-sref="awesomeStateName" data-ui-sref-opts="{reload: true}">Details State</a>

We can reload the state from the HTML only.

Angular ui-router's ui-sref-active's parent not working

We can use a .when() setting. Check this updated plunker

$urlRouterProvider.when('/index/first', '/index/first/sub1'); 

So, before the 'index.first' is fired, we do redirect to its first substate

See:

• when() for redirection (small cite:)

Parameters:

• what String | RegExp | UrlMatcher The incoming path that you want to redirect.
• handler String | Function The path you want to redirect your user to.

handler as String

If handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

Home route in ui-router

You've declared how to behave when any unknown/other route is provided - go to /404.

But we also have to define how to behave, when some expected, but not "exact" / "not known" route is accessed, ie. create alias

That's where the .when() could/should be used:

...

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// the unknown
$urlRouterProvider.otherwise('/404');

How can I go directly to a state with ui-router without first navigating to index.html

I would say that what we need here is - to let the index.html be laoded - as a SPA (Single page application). Then we will profit from the features built in in the UI-Router:

.when() for redirection

Parameters:

what String | RegExp | UrlMatcher The incoming path that you want to redirect.

handler String | Function The path you want to redirect your user to.

handler as String

If handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

.otherwise() for invalid routes

Parameters:

path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location.

app.config(function($urlRouterProvider){
    // if the path doesn't match any of the urls you configured
    // otherwise will take care of routing the user to the specified url
    $urlRouterProvider.otherwise('/index');

    // Example of using function rule as param
    $urlRouterProvider.otherwise(function($injector, $location){
        ... some advanced code...
    });
})

How to use the .when() properly (e.g. order of declaration) please check also here (with more details and examples)

• Angular UI-Router $urlRouterProvider .when not working *anymore*
• Angular UI-Router $urlRouterProvider .when not working when I click

---

Related Topics