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

我假设导航到匹配的模式会加载给定的状态，这就是为什么当它匹配时，两个模板都会尝试加载。有什么方法可以实现相同的 url 模式，但仅基于当前状态使用不同的模板？

Answer 1

假设您不能有两个具有相同 URL 的状态，为什么不继续将两个状态合并为一个呢？ ui-router 已经允许你有一个自定义函数来返回模板。您只需在状态声明中添加另一个隐藏的自定义参数（我们称之为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）的 URL 为空：

$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

这在AngularJS中非常有用，

您可以为具有相同 url 模式的多个状态指定 动态路由

我的代码如下，可能对您有用，

模块初始化，

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 3

你需要使用嵌套状态

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 4

为什么要在同一个 url 上映射两个不同的视图。当用户想要在其中一个状态上添加书签时，您是否想象过这个问题？如果它们的 url 完全相同，你怎么知道是哪一个？

我建议定义两种不同的状态，例如：

• /:post - 用于简单视图
• /:post/advanced - 用于高级视图

这可以通过将 /:post 定义为抽象状态以及简单和高级视图的两种不同状态来完成。为方便起见，简单视图将作为默认视图。如果您喜欢这个想法，我可以为您提供一个示例解决方案。

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

• /:post - 用于简单视图
• /:post?view=advanced

我希望这个答案会对你有所帮助。至少从不同的角度看事物；）。