如何使用的角度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; 
          } 
         } 
        } 
       }); 
     } 
    ]);