Question

我正在尝试为我的应用程序找到最佳路由解决方案，但我对ui-router及其最佳实践缺乏经验并没有帮助。

我的应用将显示：
- navbar-div （state1）=＆gt;总是显示
- content-div 有3个标签（每个标签都是州，所以：state2 / state3 / state4）=＆gt; state2会在页面加载时显示，然后我们可以通过点击相应的标签切换到state3或state4。

所有这些州都是stateAlpha的孩子（？）。我alphaLayoutView

中的ui-view会显示index.html

$stateProvider.state('stateAlpha', {
        url: '/*path', //will be shown on any url
        views: {
            'alphaLayoutView@' : {
                templateUrl: '/app/screens/alphaLayout.html',
                controller: 'alphaLayout.controller',
                controllerAs: 'alphaLayoutVM'
            }
        }
    });

如何将state1/2/3/4插入我的父状态（stateAlpha）模板，并为每个州添加一个简单的ui-view？
我可以让我的孩子没有网址吗？在状态标签之间导航会有问题吗？

$stateProvider.state('state1', {
        views: {
            'state1View' : {
                templateUrl: '/app/screens/state1.html',
                controller: 'state1.controller',
                controllerAs: 'state1VM'
            }
        }
    });
...

我尝试了不同的事情，但到目前为止没有任何工作。

Answer 1

我正在考虑您按照以下顺序拥有州： stateAlpha（最高州） - ＆gt; state1（包含3个制表符）=＆gt; state2，state3，state4（2,3和4是兄弟姐妹）

$stateProvider.state('stateAlpha', {
    url: '/stateAlpha',
    views: {
        '' : {
            templateUrl: '/app/screens/alphaLayout.html',
            controller: 'alphaLayout.controller',
            controllerAs: 'alphaLayoutVM'
        }
    }
})
.state('state1', {
    url: '^/state1url,
    views: {
        'alphaLayoutView@' : {
            templateUrl: '/app/screens/state1.html',
            controller: 'state1.controller',
            controllerAs: 'state1Ctrl'
        }
    }
})
.state('state2', {
    url: '^/state2url,
    views: {
        'state1LayoutView@' : {
            templateUrl: '/app/screens/state2.html',
            controller: 'state2.controller',
            controllerAs: 'state2Ctrl'
        }
    }
})
.state('state3', {
    url: '^/state3url,
    views: {
        'state1LayoutView@' : {
            templateUrl: '/app/screens/state3.html',
            controller: 'state3.controller',
            controllerAs: 'state3Ctrl'
        }
    }
})
.state('state4', {
    url: '^/state4url,
    views: {
        'state1LayoutView@' : {
            templateUrl: '/app/screens/state4.html',
            controller: 'state4.controller',
            controllerAs: 'state4Ctrl'
        }
    }
});

状态1的网址=＆gt; / state1url，
状态2的网址=＆gt; / state2url，
状态3的网址=＆gt; / state3url，
状态4的网址=＆gt; / state4url

如果从网址前面删除“^”，则会变为：

状态1的网址=＆gt; / stateAlpha / state1url，
状态2的网址=＆gt; / stateAlpha / state1url / state2url，
状态3的网址=＆gt; / stateAlpha / state1url / state3url，
状态4的网址=＆gt; / stateAlpha / state1url / state4url，

stateAlpha的视图必须包含：

<div data-ui-view="alphaLayoutView"></div>

state1的视图必须包含：

<div data-ui-view="state1LayoutView"></div>

此处添加内容标签，然后添加上面的div

我可以让我的孩子没有网址吗？在状态标签之间导航会有问题吗？

是的，如果没有网址，您可能拥有所需的孩子。即使他们没有URL也没有问题。 UI路由适用于状态。

ui-router视图没有加载

1 个答案: