如何使用的角度UI路由器參數

Question

我非常新的角度UI路由器不同的模式定義URL，我不知道如何可以定義相同的URL，但使用不同的參數組合，如：

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

我試過這個，但它不起作用。沒有顯示，只顯示一個空白頁。

然後我設置控制器中的斷點，事實證明，該控制器永遠不會運行，當我瀏覽到像/param?param2=test

一個URL誰能幫助？

Answer 1

你所缺少的是views屬性，這裏是一個工作示例：

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