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

发布时间：2020-12-17 07:00:40 所属栏目：安全来源：网络整理

导读：我跟着这个 article和 other我试图复制维基上的内容,没有任何运气. 到目前为止,这就是我所做的文件夹结构：偏指数 index.html //内部视图 index.css index.js // controller 页脚 footer.html footer.js 标题 //相同的结构 index.html //主文件 stateProv

我跟着这个 article和 other我试图复制维基上的内容,没有任何运气.

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

>偏

>指数

> 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

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

解决方法

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!