Kuan
Kuan

Reputation: 11389

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

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?

Upvotes: 0

Views: 186

Answers (1)

michelem
michelem

Reputation: 14590

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;
                            }
                        }
                    }
                });
        }
    ]);

Upvotes: 1

Related Questions