angularjs - 使用 UI-Router 使用多个 View 的空白页面

Question

我关注了这个 article而这个 other我试图复制维基上的内容，但没有任何运气。

到目前为止，这就是我所做的
文件夹结构:

部分的

指数

index.html//内部 View

index.css

index.js// Controller

页脚

footer.html

footer.js

标题

//相同的结构

index.html//主文件

状态提供者:

angular.module('app').config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state("index",
        {
            url: "/index",
            templateUrl:'/partial/index.html',
            views: {
                'footer@index': {
                    templateUrl: "/partial/header.html",
                    controller:"FooterCtrl"
                },
                'header@index': {
                    templateUrl: "/partial/header.html",
                    controller: "HeaderCtrl"
                }
            }
    });  
 $urlRouterProvider.otherwise('/index');

编辑:

这是标记:

<div>
    <div id="content" class="container">

        <div ui-view="header"></div>
        <div ui-view></div>
        <div ui-view="footer"></div>

    </div>
  </div>

我浏览的网址是:localhost:9001/#/index

我没有收到任何错误只是一个空白页

Answer 1

看起来您在 templateUrl 上使用了不正确的路径。

这是使用 ui-router 的 plunker:http://plnkr.co/edit/Nqwlkq1vGh5VTBid4sMv?p=preview

我还建议阅读 http://angular-ui.github.io/ui-router/sample/#/ 的源代码它在这里有一个抽象的实现，还有很多关于如何正确使用 ui-router 的评论。