javascript - 从 ui-router 获取 templateUrl

Question

也许标题不太清楚。

我正在开发两个嵌套的 Angular 应用程序。两者都有自己的使用 ui-router 构建的路由器。如果我调用主路由器未知的状态，我希望它在子应用程序路由器中搜索此状态以获取相关的 templateUrl 和 url到这个状态。

我考虑过创建一个带有解析器的服务。它可以解析文件以找到我想要的数据。这个解决方案可能不是我拥有的最佳选择，这就是为什么我想知道 ui-router 中是否有特定的函数/方法来实现它。从我在 ui-router 文档中读到的内容来看，似乎不是:/

请随时询问更多详细信息或建议与我的目标相匹配的另一个解决方案:)

Answer 1

您可以通过在子模块上定义的 $stateProvider 配置中使用动态参数来实现此目的。所以你在主模块上有一些锚定路由，如果有匹配，ui-router 将简单地获取关联的模板。如果没有匹配的绝对路由/url，则 ui-router 会退回到您的参数化路由，如下所示:

// anchored
$stateProvider
  .state('mainAppState', {
    url: '/anchored',
    controller: 'myCtrl'
 })

// sub module
 .state('subAppState', {
    url: /:parameter
    resolve: { // use the resolve and $stateParams to get some parameter with which you can make a request to your API }
    templateProvider: { // inject a service and use it to call your backend }

您可以使用参数，该参数会传递给 $stateParams，该参数会传递给您的 resolve block 函数，该函数可以检索一些数据或处理来自$stateParams，然后 templateProvider 可以使用它来提供有意义的后备 URL。这是因为 templateProvider 接收所有解析。在执行之前，它将始终等待解析 block 中的所有 promise 以一种或另一种方式解决。

这样您就可以在子应用程序中捕获来自主应用程序的任何不匹配的 URL。希望这会有所帮助。

在这里查看我的问题:ui-router: async data in templateUrl function

哦，还有一件事 - 如果您要在构建过程中破坏 JS，请确保使用 .$inject = [ ... ] 定义 templateProvider 函数。如果没有，您将收到未知提供商错误。 ngAnnotate 不会捕获 templateProvider 函数中的依赖项。或者，您可以只使用 /* @ngInject */，这对我有用。