AngularJs - Routing for Dynamic URL

Question

I have the following code for states:

.config(function ($stateProvider, $urlRouterProvider, CONSTANTS) {
    $urlRouterProvider.otherwise('/cyo');

    $stateProvider.state('pri', {
        url: '/pri',
        controller: 'priController',
        templateUrl: CONSTANTS.PRI_TEMPLATES.PRI_TEMPLATE_URL,
        redirectTo: 'pri.size'
    }).state('rec', {
        url: '/rec',
        controller: 'recController',
        controllerAs: 'recCtrl',
        templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
    })
 });

The URL is being generated is http://adc.com/REC/1440/#

1440 being a ID that changes depending upon a prod Cat. the template is not loaded with this url. but as soon I add '/rec/' after the current url the template is loaded - http://adc.com/REC/1440/#/rec/ the page loads correctly

I am not able to understand how to get this fixed.

Ayush

Answer 1

You should define the state paramaters when you define the state.

Try this:

.state('rec', {
    url: '/rec/:id',
    params: {id: 'defaultValue'},  // optional
    controller: 'recController',
    controllerAs: 'recCtrl',
    templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})

And the html code:

<a ui-sref='rec({id: 123})'>Go to rec</a>