angularjs ui-router详解

1：首先为什么选择ui-router,而没有选择ng-router

最主要的原因是ui-router路由可以多层路由嵌套

具体用法

1：首先引入这个插件

2：如何使用路由

1：首先全局注入路由模块

angular.module('mainApp',['ul.router'])

2:开始使用

首先，配置路由

  angular.module('mainApp',['ui.router']).config(["$stateProvider",  function($stateProvider) {      
        $stateProvider     
        .state("home", {
            url: '/',   
            template:'./view/home.html',
            controller:home.ctrl
        })     
    }]);  

那路由配置好如何映射到页面上,依赖于ui-view

<div ng-app="mainCtrl" >
        <a ui-sref="/home">点击我路由跳转</a>
        <a ui-sref="/home1">点击我进行新的路由跳转</a>
        <div ui-view></div> //匹配当前路由，进行映射，从而显示到页面上对应的路由页面信息  
</div>

 

2：路由嵌套

设置父级路由个子路由，可以通过parent来指定父级路由

也可以通过一下写法来指定父级路由

 angular.module('mainApp',['ui.router']).config(["$stateProvider",  function ($stateProvider) {      
        $stateProvider     
        .state("home", {//父路由
            url: '/parent',  
            template:'<div>我是父级路由'
                    +'<div ui-view><div>'// 子View
                    +'</div>'
        })      
        .state("home.child", {//子路由
            url: '/child',    
            template:'<div>我的父级路由是home</div>'
        })     
    }]);

3：多级路由图嵌套

但需要注意

官方给出这个提示，意思是views下的模块可以继承他们属于的模块，也就是继承父级路由，但不会继承兄弟路由的属性，也就是views下的路由之间互不影响

看下父级路由对应的页面内容，写ng-if是本模块写的相当于是一个选项卡，只渲染一个选项的内容到页面上