使用ui-router作为服务器端呈现页面

时间:2015-04-30 22:11:00

标签: javascript angularjs angular-ui-router

我有一个后端由一个大向导表单提供的页面,我正在尝试使用ui-router定义状态以显示/隐藏向导的不同部分。

我将抽象状态挂钩到提供页面的网址,然后定义子状态。

这样的事情:

$stateProvider.state('parent', {
    url: '/page/url',
    controller: WizardController,
    controllerAs: 'Wizard',
    resolve: {
        steps: function() { return ['one', 'two']; };
    }
});

$stateProvider.state('parent.one', {
    controller: ChildOneController,
    controllerAs: 'ChildOne'
});

$stateProvider.state('parent.two', {
    controller: ChildTwoController,
    controllerAs: 'ChildTwo'
});

和服务器端呈现的模板如下:

<!-- served under /page/url -->
<my-directive steps="Wizard.steps"></my-directive>
<section ng-if="Wizard.activeState === 'one'"></section>
<section ng-if="Wizard.activeState === 'two'"></section>

我希望我可以将状态控制器附加到页面,并避免ui-views和从角度应用程序加载模板。我可以避免使用路由器,但由于我的向导是基于步骤的,我认为使用路由器状态机会很好。

这甚至可能吗?我很难找到类似的例子。谢谢!

我正在使用角度1.2.24和ui-router 0.2.11

http://plnkr.co/edit/5Rx16pNVyZvEEUu3dyZy?p=preview

0 个答案:

没有答案