如何让 ui-router stateHelper 工作

Question

我正在尝试创建一个抽象根状态并解析其中的所有数据，然后再激活子状态 - 通过使用 ui-router 在激活之前进行异步数据加载（从服务器）任何 routes/states 等

为此，我尝试使用 ui-router.stateHelper - as suggested in this answer。

我 ui-router $stateProvider 正常工作在尝试 stateHelper:

我的 previous app.js 文件 ui-router 代码看起来像这样：

myApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page1', {
        url : '/page1',
        templateUrl : 'templates/page1.html'
    })
    .state('page2', {
        url : '/page2',
        templateUrl : 'templates/page2.html'
    })
});

我的 index.html 看起来像：

<div>
    <a ui-sref="page1"><img src="images/page1_button.jpg></a>
    <a ui-sref="page2"><img src="images/page2_button.jpg></a>
</div>
<div id="template_contents" ui-view></div>

它工作正常没有问题（除了状态和控制器会在主要 myApp.run 完成之前加载 - 即使我的 .运行函数有承诺等）

自从 'updating' 到 stateHelper，我的 app.js 看起来像：

myApp.config(function($urlRouterProvider, stateHelperProvider) {
    stateHelperProvider
        .state({
                name: 'root',
                template: '<ui-view/>',
                abstract: true,
                resolve: {
                    // haven't got to this point yet :-/
                },
                children: [
                    {
                        name: 'page1',
                        url : '/page1',
                        templateUrl : 'templates/page1.html'
                    },
                    {
                        name: 'page2',
                        url : '/page2',
                        templateUrl : 'templates/page2.html'
                    },
                ]
        });
});

现在应用程序没有更改状态/加载模板，它给我以下控制台错误：
Error: Could not resolve 'page1' from state ''
是什么导致了这个错误？

当使用 stateHelper 时，html 和 ui-sref 是否必须更新/更改？（在相当少的文档中没有提到......缺乏信息表明 html 方面应该与 ui-router 格式相同）

Answer 1

我已经获取了您的代码并创建了一个 Plunker：http://plnkr.co/edit/eOWpYKFRL3PTGHmU2txi?p=preview 您 post 编写的代码没有任何问题，所以我猜您的问题出在 HTML 而您没有 post。我最好的猜测是您在（实际上很少）文档中忽略了这一部分：

By default, all state names are converted to use ui-router's dot notation (e.g. parentStateName.childStateName). This can be disabled by calling .state() with an optional second parameter of true.

虽然以下通常适用于 ui-router：

<a ui-sref="page1">Page 1</a>
<a ui-sref="page2">Page 2</a>

它不会与 statehelper 结合使用，您需要在点符号中使用完整的 statename，这意味着，包括 parent 的名称：

<a ui-sref="root.page1">Page 1</a>
<a ui-sref="root.page2">Page 2</a>

如何让 ui-router stateHelper 工作

how to get ui-router stateHelper working

angularjs

angularjs-routing

angular-ui-router