Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular UI-Router: Multiple URLs to single state

I have started using angular's ui-router, and I am trying to figure out how to have multiple URLS refer to a single state. For example:

/orgs/12354/overview
//retyrns the same pages as
/org/overview

My $state provider is currently set with something like this, and its unclear to my how to slip in the alias '/org/overview' route such that it properly inherits from the 'org' parent.

.state('org', {
  abstract: true,
  url: '/orgs/:orgID',
  templateUrl: '/client/navigation/main.html'
})
.state('org.overview', {
  url: '/overview',
  templateUrl: '/client/overview/overview.html',
  controller: 'OverviewCtrl'

})
like image 939
Zak Kus Avatar asked Oct 17 '14 01:10

Zak Kus


1 Answers

This can be achieved using when(). Suppose this is the state you want to point to with multiple urls.

.state('app.home',
  {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })

In config() you can use when() as follows:

angular.module('myApp', [])
   .config($urlRouterProvider){
       $urlRouterProvider.when(/homepage, ['$state','$match', function ($state, $match) {
          $state.go('app.home');
 }]);
}

Likewise you can add multiple urls pointing to same state.

like image 96
avinashkrsharma Avatar answered Sep 29 '22 01:09

avinashkrsharma