使用UI-Router的多个视图的空白页面

Question

我跟着这篇文章和另一篇文章,我试图复制维基上的内容,没有任何运气.

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

• 局部
  • 指数
    • index.html //内部视图
    • index.css
    • index.js // controller
  • 页脚
    • footer.html
    • footer.js
  • 头
    • //相同的结构
• index.html //主文件

stateProvider:

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 的评论。