AngularUI路由器：具有相同url模式的多个状态

Question

嘿，我遇到了我认为是常见的路由问题，但我无法找出解决方案。基本上我的页面有两种状态，基本和高级，我希望两种状态的URL模式相同，但是只加载当前状态的模板（从控制器内部过渡到此模板）

config(function ($stateProvider) { 

    $stateProvider.state('basic', { 
    url: '/:post', 
    templateUrl: function (stateParams) { 
     return 'post-' + stateParams.post + '-tmpl.html'; 
    } 
    }); 

    $stateProvider.state('advanced', { 
    url: '/:post', 
    templateUrl: function (stateParams) { 
     return 'post-' + stateParams.post + '-advanced-tmpl.html'; 
    } 
    }); 
}) 

controller('myCtrl', function ($state) { 
    // 
    // In this case, I would expect only the template from 
    // the advanced state to load, but both templates are trying 
    // to load. 
    $state.transitionTo('advanced', {post: 2}); 
} 

我假设导航到匹配的模式加载给定的状态，这就是为什么当它匹配时，两个模板试图加载。有什么方法可以完成相同的网址模式，但只有基于当前状态的不同模板？

Answer 1

假设你不能有两个国家使用相同的URL，你为什么不走和两个状态合并成一个？ Ui路由器已经允许你有一个自定义函数来返回模板。你只需要添加一个隐藏的自定义参数（让我们将他advanced调用）的状态声明：

$stateProvider.state('basicOrAdvanced', { 
    url: '/:post', 
    templateUrl: function (stateParams) { 
    if (stateParams.advanced) { 
     return 'post-' + stateParams.post + '-advanced-tmpl.html'; 
    } else { 
     return 'post-' + stateParams.post + '-tmpl.html'; 
    } 
    }, 
    params: { 
    advanced: False 
    } 
}); 

然后你把它叫做：

$state.transitionTo('basicOrAdvanced', {post: 2, advanced: True}) 

---

对于另一种可能的解决方案嵌套状态和通用控制器，请参阅ui-router的github页面上的问题#217和#1096。

的解决方案提出有创建第三状态，其控制器做调度工作，而要在（basic和advanced）降落在两个州都有空网址：如果

$stateProvider.state('basicOrAdvanced', { 
    url: '/:post', 
    controller: function($state, $stateParams) { 
    if($stateParams.advanced) { 
     $state.go('advanced', {post: $stateParams.post}); 
    } else { 
     $state.go('basic', {post: $stateParams.post}); 
    } 
    }, 
    params: { 
    advanced: False 
    } 
} 

该解决方案是更好的状态在多个方面不同比简单templateUrl（例如，如果它们具有完全独立的控制器等）

---

另见another question on StackOverflow about a similar issue。

Answer 2

您需要使用嵌套的状态

config(function ($stateProvider) { 


    $stateProvider.state('post', { 
    url: '/:post', 
    templateUrl: function (stateParams) { 
     return 'post-' + stateParams.post + '-advanced-tmpl.html'; 
    } 
    }); 

    $stateProvider.state('post.basic', { 
    url: '/:post', 
    templateUrl: function (stateParams) { 
     return 'post-' + stateParams.post + '-tmpl.html'; 
    } 
    }); 

}) 

controller('myCtrl', function ($state, $timeout) { 
    // go to advanced 
    $state.transitionTo('post', {post: 2}); 
    // after 500ms switch to basic 
    $timeout(function() { 
     $state.transitionTo('post.basic', {post: 2}); 
    }, 500) 
} 

Answer 3

这是AngularJS非常有用，

您可以指定动态路由与相同的URL模式多状态

我的代码遵循能对您有用，

Module Intialization，

var app = angular.module("koops_app", ['ui.router','ui.bootstrap']); //here you have to define all your required module for your project that you should inject... 

此外，

app.config(function ($locationProvider, $httpProvider, $stateProvider, $urlRouterProvider, $wampProvider) { 


    // When No Routing i.e Default Routing 
    $urlRouterProvider.when('', '/dashboard'); 


    // 404 
    $stateProvider.state("404", { 
     url: "/404", 
     templateUrl: 'template/404.html', 
    }); 


    // When Only One Argument i.e. Only Module Name 
    $stateProvider.state("default", { 
     url: "/:section", 
     templateUrl: 'views/View-to-be-load.html', //can use $stateParams.section for dynamic 
     reload: true, 
     resolve: { 
      loadController: ['$q', '$stateParams', '$state', 
         function ($q, $stateParams, $state) { 
          var deferred = $q.defer(); 
          deferred.resolve(); 
          return deferred.promise; 
         } 
        ] 
     }, 
     controllerProvider: function ($stateParams) { 
      return 'controllerName'; 
     } 
    }); 



     // When Two Argument i.e. Module/Controller 
     $stateProvider.state("default/title", { 
      url: "/:section/:title", 
      templateUrl: 'views/View-to-be-load.html', //can use $stateParams.section for dynamic 
      reload: true, 
      resolve: { 
       loadController: ['$q', '$stateParams', '$state', 
          function ($q, $stateParams, $state) { 
           var deferred = $q.defer(); 
           deferred.resolve(); 
           return deferred.promise; 
          } 
         ] 
      }, 
      controllerProvider: function ($stateParams) { 
       return 'controllerName'; 
      } 
     }); 



     // When Three Arguments i.e. Module/Controller/id 
     $stateProvider.state("default/title/id", { 
      url: "/:section/:title/:id", 
      templateUrl: 'views/View-to-be-load.html', //can use $stateParams.section for dynamic 
      reload: true, 
      resolve: { 
       loadController: ['$q', '$stateParams', '$state', 
          function ($q, $stateParams, $state) { 
           var deferred = $q.defer(); 
           deferred.resolve(); 
           return deferred.promise; 
          } 
         ] 
      }, 
      controllerProvider: function ($stateParams) { 
       return 'controllerName'; 
      } 
    }); 



     // Otherwise 
     $urlRouterProvider.otherwise("/404"); 

可能这是对你有帮助... 享受...

Answer 4

为什么你会希望有映射到相同的URL两种不同的观点。当用户想要在其中一个州添加书签时，您是否想到了这个问题？那么如果他们具有完全相同的网址，您怎么知道哪一个是？

我建议定义就像两个不同的状态：

• /：后 - 很简单视图
• /：交/高级 - 针对高级视图

这是可以做到将/：post定义为抽象状态和简单和高级视图的两种不同状态。为了方便，简单的视图将作为默认值。如果您喜欢这个创意，我可以为您提供一个示例解决方案。

另一种选择是添加URL参数，例如：

• /：后 - 很简单视图
• /：后视=先进

我希望这个？答案会帮助你。至少从不同的角度看待事物;）。