angulr ui-router路由

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29412527/article/details/82963759

angularJS里面的ngRoute并不能满足我们的开发需求
因为angular的ng-view在写多个的情况下，不能控制内容的显示，渲染出来的内容都是一样的。
所以用第三方插件ui-router

ui-router

• 由第三方编写的路由模块，相比之前的ngRoute更加灵活多变
• 网址： http://angular-ui.github.io/
• 可以在页面挖多个坑,填不同的内容
• ui-rotuer把不同的url锚点值称之为不同的状态(state)
• 模块名为ui.router

通过 npm 安装

npm install angular-ui-router

ui-router使用步骤

1、 引用angularjs和angular-ui-router
2、 在模块中引入ui.router
3、 创建config，通过$stateProvider来配置路由表

 $stateProvider.state({
                    name:'myhome2', //路由的名称
                    url:'/myhome4', //路由匹配的地址
                    template:'<h1>123</h1>'
                })

4、 通过$urlRouterProvider配置默认路由

   $urlRouterProvider
                .otherwise('/myhome4');

示例

    <div ng-app="myApp">
        <div>
            <ul>
                <!--<li><a href="#!/home">home</a></li>-->
                <!--<li><a href="#!/news">news</a></li>-->
                <!--<li><a href="#!/other">other</a></li>-->
                <!--ui-sref用来匹配路由的名称-->
                <!--ui-sref-active点击以后给当前a标签添加样式-->
                <li><a ui-sref="home" ui-sref-active="red">home</a></li>
                <li><a ui-sref="news" ui-sref-active="red">news</a></li>
                <li><a ui-sref="other" ui-sref-active="red">other</a></li>
            </ul>
        </div>
        <div>
            <ui-view name="view1"></ui-view>
            <ui-view name="view2"></ui-view>
            <ui-view name="view3"></ui-view>
        </div>
    </div>

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
    var app=angular.module('myApp',['ui.router']);
    app.config(function ($stateProvider) {

        //第一个参数是路由的名字
        $stateProvider
            .state('home',{
                url:'/home',
                template:'<h1>{{text}}</h1>',
                controller:function ($scope) {
                    $scope.text='首页'
                }
            })
            .state('news',{
                url:'/news',
                template:'<h1>{{text}}</h1>',
                controller:function ($scope) {

                    $scope.text='news'
                }
            })
            .state('other',{
                url:'/other/a/b/c/d/e/f/g',
                views:{
                    'view1':{
                        template:'<h1>{{text}}</h1>',
                        controller:function ($scope) {
                            //debugger;
                            $scope.text='view1'
                        }
                    },
                    'view2':{
                        template:'<h1>{{text}}</h1>',
                        controller:function ($scope) {
                            $scope.text='view2'
                        }
                    }
                }

            })
    })
</script>

路由嵌套(抽象路由)

抽象路由显示不了东西。必须配合抽象子路由显示
好处：根据路径就知道是抽象路由还是非抽象路由。灵活切换。减少ng-if ng-show。

抽象路由模板

    <div ng-app="myApp">
        <!--抽象路由的标签-->
        <!--单有tab抽象主路由不会被渲染出来必须含有抽象子路由才可以-->
        <a href="#!/tab/home">home</a>
        <!--非抽象路由-->
        <a href="#!/other">other</a>
        <div>
            <ui-view></ui-view>
        </div>
    </div>

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>

<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>    

传参~~

<div ng-app="myApp">

    <ui-view>

    </ui-view>
</div>

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
    var  app=angular.module('myApp',['ui.router']);
    app.config(function ($stateProvider,$urlRouterProvider) {
        $stateProvider
            .state('tabs',{
                url:'/tabs',
                abstract:true, //通过abstract 标记当前路由为抽象主路由
                templateUrl:'template.html'
            })
            //  /tabs/home
            .state('tabs.home',{
                url:'/home',
                template:'<h1>home</h1>'
            })
            .state('tabs.news',{
                url:'/news',
                template:'<h1>news</h1>'
            })
            // 抽象路由是通过抽象路由名称来进行规划是否为抽象路由
            .state('other',{
                //：name表示当前参数可以变化
                //？表示当前参数可以为空
                url:'/other/:name?',
                template:'<div><a href="#!/tabs/home">home</a><h1>other</h1></div>',
                controller:'myCtrl'
//                controller:function ($routeParams) {
//                    console.log($routeParams);
//                }
            });
        //默认跳转
        $urlRouterProvider
            .otherwise('/other')


    });
    app.controller('myCtrl',['$location',function (ab) {
        console.log($location);
    }])
</script>

template.html文件内容 :

<h1>抽象主路由内容</h1>
<ul>
    <li>
        <a href="#!/tabs/home">home</a>
        <a href="#!/tabs/news">news</a>
        <a href="#!/other">other</a>
    </li>
</ul>
<ui-view></ui-view>

对比ngRoute来看

1、ui-view           => ng-view
2、$stateProvider.state => $routeProvider.when() 
3、$urlRouterProvider.otherwise =>$routeProvider.otherwise
4、多了abstract 抽象路由
5、跳转方式多了  ui-sref 
可以通过路由名称来进行跳转  
<a ui-sref="home">home</a>