Dynamic URLs in angular

Question

I currently Angular 1.6 and angular-ui/ui-router I have a problem with dynamic url which I don't know a limit of parameter

example

www.example.com/name/hello/address/telephone/postcode/city/ .... (n)
or
www.example.com/name/hello/school/age/weight/height/...(n)
or
www.example.com/name/hello/friends/family/age/address

from the example url I need to using ui-route to manage that url and get value parameters from url and just implement only one state.

expected result

let result = [hello,address,telephone,postcode,city, .... (n)];

example route (*only one state handle this case)

.state('person', {
    url: '/name/:param1/:param2', (which I want to dynamic)
    component: 'person',
    resolve: {
    search:($transition$) {
      return  $transition$.params(); 
    }
   }
})

Please advice :)

Update :

I found a good solution from this link

Recursive ui router nested views

score 0 · Answer 1 · answered Mar 07 '17 at 15:32

0

you can make a function which takes your array input and return an state object.

function generateState(array){
var url = a.reduce(function(url, item){ return url+":"+item+"/" }, "/name/");
return {
    url: url,
    component: 'person',
    resolve: {
    search:($transition$)=> {
      return  $transition$.params(); 
    }
   }
 }
}

after which you can dynamically register the state using $stateProvider

answered Mar 07 '17 at 15:32

pranavjindal999

2,937
2
26
35

1

Thanks guy, it's look good solutions but I fond one from this link http://stackoverflow.com/questions/25732164/recursive-ui-router-nested-views – bellpiapple Mar 07 '17 at 15:46

Dynamic URLs in angular

1 Answers1