How to define URL with different pattern of parameters in Angular UI-ROUTER

Question

I am pretty new to Angular UI-ROUTER, I wonder how can I define same URL but with different parameters combination like:

$stateProvider
    .state("no_param",{
        url: "/param",
        /* if no param, goes here*/
        template: "<div ng-repeat='p in params'>{{p}}</div>",
        controller: function($scope, $stateParams){
            $scope.params = $stateParams;
        }
    })
    .state("one_param",{
        url: "/param?param1",
        /* if one param1, goes here*/
        template: "<div ng-repeat='p in params'>{{p}}</div>",
        controller: function($scope, $stateParams){
            $scope.params = $stateParams;
        }
    })
    .state("another_one_param",{
        url: "/param?param2",
        /* if one param2, goes here*/
        template: "<div ng-repeat='p in params'>{{p}}</div>",
        controller: function($scope, $stateParams){
            $scope.params = $stateParams;
        }
    })
    .state("two_param",{
        url: "/param?param1&param2",
        /* if param1 & param2, goes here*/
        template: "<div ng-repeat='p in params'>{{p}}</div>",
        controller: function($scope, $stateParams){
            $scope.params = $stateParams;
        }
    })

I tried this, but it does not work. Nothing shown, only display a blank page.

Then I set a breakpoint inside the controller, it turns out that the controller never get run when I navigate to a URL like /param?param2=test

Could anyone help?

michelem · Accepted Answer · 2015-12-15 07:24:21Z

1

What you are missing is the views property, here is a working example:

JSFiddle

angular.module('myApp', ['ui.state'])
    .config(['$stateProvider', '$routeProvider',
        function($stateProvider, $routeProvider) {
            $stateProvider
                .state('test', {
                    url: '/test',
                    views: {
                        'main': {
                            template: '<a ng-href="#/test/hello">param1</a> - <a ng-href="#/test/hello/world">param2</a>',
                        }
                    }
                })
                .state('one_param', {
                    url: '/test/:param1',
                    views: {
                        'main': {
                            template: '<a ng-href="#/test">home</a> <div ng-repeat="p in params">{{p}}</div>',
                            controller: function($scope, $stateParams) {
                                $scope.params = $stateParams;
                            }
                        }
                    }
                })
                .state('two_param', {
                    url: '/test/:param1/:param2',
                    views: {
                        'main': {
                            template: '<a ng-href="#/test">home</a> <div ng-repeat="p in params">{{p}}</div>',
                            controller: function($scope, $stateParams) {
                                $scope.params = $stateParams;
                            }
                        }
                    }
                });
        }
    ]);

edited Dec 15, 2015 at 7:24

answered Dec 14, 2015 at 17:49

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kuan Over a year ago

Thanks, could you help pointing out(maybe rephrase here) which part of that link("as stated here:")should I pay attention to?

michelem Over a year ago

Exactly the Url Parameters section, look at the examples they are pretty self-explained

Kuan Over a year ago

Sorry I did not quite catch that part, I try to figure out which part says that "You have to use another notation/syntax" and Why my way does not work

michelem Over a year ago

mmm no there should be another problem with your code, indeed you can use the ?param1 notation too. I should try something with a JSFiddle.

Kuan Over a year ago

I wonder how can I tell it is param1 or param2 in url if I use your solution?

|

Collectives™ on Stack Overflow

How to define URL with different pattern of parameters in Angular UI-ROUTER

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related