空白页面进入应用

时间:2016-10-09 18:49:39

标签: angularjs angular-ui-router

我试图将我的应用程序设置为使用2个布局(一个没有侧边栏,一个有两个侧边栏),这是我的解决方案:

 $stateProvider
            .state('main', {
                url: "/",
                abstract:true,
                templateUrl: "/layouts/main.html"
            })
            .state('sidebars', {
                url: "/",
                abstract:true,
                templateUrl: "/layouts/two-sidebar.html"
            })
            .state('home', {
                parent:'main',
                templateUrl: "/partials/home.html"
            })
            .state('about', {
                url: "about",
                parent:'sidebars',
                templateUrl: "/partials/about.html"
            })

main.html中

<div class="container">
    <div ui-view class="view"/>
</div>

两sidebar.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">leftcontent</div>
        <div class="col-md-8">
            <div ui-view class="view"></div>
        </div>
        <div class="col-md-2">rightcontent</div>
    </div>
</div>

我确信有更好的解决方案,但是这一切都很好。 唯一的问题是当我第一次访问根页/#/时,我第一次得到一个空白页面,当我点击home时,网址是相同的,但它运行正常。

更清楚一点,就是这里的plunker,看看你必须在外部窗口打开它的问题(预览窗口中的蓝色按钮):http://plnkr.co/edit/Q4cZM69hn0lutYEYjmxH?p=preview

编辑:看起来主要问题是缺少网址

.state('home', {
                url:"",
                parent:'main',
                templateUrl: "/partials/home.html"
            })

2 个答案:

答案 0 :(得分:0)

您已定义两个绑定到同一网址的状态(/)。

根据UI路由器的设计,只应将一个状态绑定到URL。

如果希望有两个具有相同网址的状态,请将第二个状态设置为子状态,并让它在网址中没有任何内容,如下所示:

.state('main', {
            url: "/",
            abstract:true,
            templateUrl: "/layouts/main.html"
        })
        .state('main.sidebars', {
            url: "",
            templateUrl: "/layouts/two-sidebar.html"
        })

答案 1 :(得分:0)

像这样改变,

.state('main', {
            url: "/",
            abstract:true,
            templateUrl: "/layouts/main.html"
        })
.state('sidebars', {
            url: "/something",
            abstract:true,
            templateUrl: "/layouts/two-sidebar.html"
        })