抽象路由显示不了东西。必须配合抽象子路由显示

抽象路由模板

<script>

    var app=angular.module('myApp',['ui.router']);

    app.config(function ($stateProvider) {

        //第一步创建抽象主路由

        $stateProvider

            .state('tab',{

                url:'/tab',

                abstract:true,  //通过abstract 标记当前路由为抽象主路由

                templateUrl:'template.html'

            })

            //抽象子路由

            .state('tab.home',{

                url:'/home',

                template:'<h1>home</h1>'

            })

            .state('tab.news',{

                url:'/news',

                template:'<h1>news</h1>'

            })

            //不属于抽象路由

            .state('other',{

                url:'/other',

                template:'<h1>other</h1>'

            })

    })

</script>    

抽象的状态模板仍然需要<ui-view/>，来让自己的子状态模板插入其中。

abstract：表示抽象模版，不能被显性激活，只能被子模版隐性激活，可以传递作用域变量$scope给子模板。一旦这个路由设置了abstract:true  如果下面没有子模版，那么模版不会被渲染出来，也就是说这种情况下必须设置子模版。

app.config(function ($urlRouterProvider,$stateProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

       .state('navPage',{

            url: '',

            templateUrl: 'view/navPage.html',

            controller: 'navPageCtrl',

            abstract: true

        })

        .state('navPage.home',{

            url: '/home',

            templateUrl: 'view/home.html',

            controller: 'homeCtrl'

        })

这里你的'navPage'是抽象路由状态，那么写上 abstract: true，然后你的navPage.html里面也要添加<div ui-view></div>，让home.html显示在这里面

 $urlRouterProvider.otherwise('/home');

这行代码的意思是默认跳转到 /home 页。想要跳转到指定子页面的话你需要自己进行指定。

比如home里嵌套的是xxx，则路径该写为 /home/xxx；不过还需要你再配置一个xxx页面才可以了。

不过你这里home还是navPage的子页面，且路径为一个空/，写的时候就应该写成“//home/xxx”了。

要是想跳到home页的话应该是“localhost:86/#!//home”