AngularJS，ui-router，嵌套状态

Question

我正在使用 ui-router 构建应用程序的轮廓。我已经定义了状态并且它似乎有效，但我不禁觉得在最佳实践方面可能有更好的方法。

我的状态:

'main' 是一个带有页眉、页脚和中间内容区域的抽象状态。

'main.home' 是默认出现的。内容文件“home.tpl.html”是一种带有指向应用程序其他区域的 sref 的启动页面，例如“main.wizard.step1”。

“main.wizard”是一个抽象状态，代表一个多步骤信息收集向导。

'main.wizard.step1'、'main.wizard.step2' 是向导中的步骤

我怀疑的是我使用具有“@”和“”值的“ View ”对象。这看起来合理吗，还是您会做其他事情？

$urlRouterProvider.otherwise('/');

var app = {
    name: 'main',
    abstract: true,
    url: '',
    views: {
        'header': {
            templateUrl: 'header.tpl.html'
        },
        'footer': {
            templateUrl: 'footer.tpl.html'
        }
    }
};

var home = {
    name: 'main.home',
    url: '/',
    views: {
        "@": {
            templateUrl: 'home/home.tpl.html'
        }
    }
};

var wizard = {
    name: 'main.wizard',
    abstract: true,
    url: '/wizard',
    views: {
        "@": {
            templateUrl: 'wizard/wizard.tpl.html'
        }
    }
};

var step1 = {
    name: 'main.wizard.step1',
    url: '/step1',
    views: {
        "": {
            templateUrl: 'wizard/step1.tpl.html'
        }
    }
};

/** repeat similarly for step2, step3 & step 4 **/

$stateProvider.state(app);
$stateProvider.state(home);
$stateProvider.state(wizard).state(step1).state(step2).state(step3).state(step4);

Answer 1

'@' 在 View 模板定义中的含义将被注入(inject)到根状态的 ui-view 中，通常是您的 index.html。
如果您希望向导进入主页面的中间区域，您应该在 index.html 中添加如下内容:

<ui-view name='content'>Optional placeholder text</ui-view>

在 View 的定义中，您应该执行类似的操作

var wizard = {
name: 'main.wizard',
abstract: true,
url: '/wizard',
views: {
    "@content": {
        templateUrl: 'wizard/wizard.tpl.html'
    }
 }
};

你实际上可以放弃 @在 @content因为 main 是向导的父级，您不必以绝对方式解决它。
在任何情况下，如果您想在您的向导中包含步骤(当然)，请不要在您的向导虚拟状态中放置任何 View 。让您的步骤子状态有自己的 View 和目标 wizard@ .我认为您的向导不需要单独的 View 包装器(也许如果您想执行“步骤 x of y”或进度条)。
希望能帮助到你。