前端 - angular ui-router 模板内容不显示

Question

求助问题：引用了angularjs的ui-router服务，但是模板内容没有显示

找了半天错误，没发现哪里有问题，又跑去看官方文档，还是没有发现。又碰到类似问题的道友么？
代码地址 https://github.com/fantaishao/angular-directive/blob/master/table-directive/scripts/app/app.js
页面始终是空白的

控制台没有报错

这是我的文档目录结构

index页面内容

其中的一个模板内容 【顶部导航navbar，其他模板类似】

Answer 1

abstract属性是用来定义抽象路由的，即路由的嵌套定义的时候会使用到，并且，定义了abstract属性之后，肯定会有一个template或者templateUrlAttribute to home the subview into the parent view.

You don’t involve nested routing here, you just want to load three templates to the corresponding locations on the page at the same time. Then, there is no need to use the abstract:true line of code. This line definitely needs to go.

Then. A <p ui-view></p>只能加载一个视图，你如果要同时加载三个模版到index.html中的话，那么，你就需要在index.html中定义三个不同名称的ui-view，然后，在你的app.js里，把这三个不同名字的ui-view is added to the code of the corresponding template to be loaded.

For example:

In your index.html, write like this

<!-- index.html -->
<p ui-view="navbar"></p>
<p ui-view="sidebar"></p>
<p ui-view="footer"></p>

Then, in your app.js, write like this:

/* app.js */
/* 我就简写主要的部分了 */
$stateProvider
    .state('site', {
        url: '/site',
        views: {
            'navbar': {
                templateUrl: '',
                controller: ''
            },
            'sidebar': {
                templateUrl: '',
                controller: ''
            },
            'footer': {
                templateUrl: '',
                controller: ''
            }
        }
    })

Answer 2

I just tried your code and there is no problem. Just visit http://127.0.0.1:8888/#/site and it will work. (When you try it yourself, just change the port and machine to yours)

Take a screenshot

You can use this, if the current URL does not match, jump to the page you want to display

$urlRouterProvider.otherwise("/site");

Answer 3

Where is ui-view in html?