dynamic links with ui-router

Question

How do you create dynamic links in angularJs with ui-router

  .state('8week.visitorId', {
    url:'/8week/:visitorId',
    templateUrl: 'app/8week/8week-page.tmpl.html',
    controller: 'VideoCtrl',
    controllerAs: 'controller'
  })

As far as I can tell this should work with the value being available using: $stateParams.visitorId in the controller

I also need the route to work even when a visitorId is not included. Like: www.example.com/8week/myId and www.example.com/8week

score 0 · Answer 1 · edited May 23 '17 at 12:30

The answer is in the params : {} configuration and its setting: squash. There are some detailed explanations with examples:

So, what we have to do, is just to provide default value (could idea) and let it be squashed if is such default is passed. Otherwise it will use the passed that value.

.state('8week.visitorId', {
    url:'/8week/:visitorId',
    params: {visitorId : { squash : true, value: null }}
    templateUrl: 'app/8week/8week-page.tmpl.html',
    controller: 'VideoCtrl',
    controllerAs: 'controller'
})

There is the documentation: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

small cite:

squash - {bool|string=}: squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value. If squash is not set, it uses the configured default squash policy. (See defaultSquashPolicy())

There are three squash settings:

false: The parameter's default value is not squashed. It is encoded and included in the URL

true: The parameter's default value is omitted from the URL. If the parameter is preceeded and followed by slashes in the state's url declaration, then one of those slashes are omitted. This can allow for cleaner looking URLs.

"<arbitrary string>": The parameter's default value is replaced with an arbitrary placeholder of your choice.

dynamic links with ui-router

1 Answers1