AngularJS 子路由与多视图

ui-router 的使用

var app = angular.module('app',['ui.router']);
app.config(['$stateProvider','urlRouterProvider',function(){
    //在代码中路由切换是以 state 进行的
    $stateProvider.state('home',{
        url:'/home/:id',
        template:'<h1>首页</h1>'，
        controller:'xmgController'
    }).state('my',{
        url:'/my/:id',
        template:'<h1>my</h1>'，
    }).state('contact',{
        url:'/contact/:id',
        template:'<h1>contact</h1>'，
        controller:'xmgController'
    });
    $urlRouterProvider.otherwise('home/1')
}])
//这里不是 routeParams 是 stateParams
app.controller('xmgController',['$scope','$stateParams',function($scope,$stateParams){
    $scope.name = '123';
    console.log($stateParams.id)
}]

<div>
    <ul>
        // ui-sref-active 把当前选中的路由添加样式，没选中的不添加，ui-Router 中不用 href 用 ui-sref
        <li><a ui-sref-active="active" ui-sref="home({id:1})">首页</a></li>
        <li><a ui-sref-active="active" ui-sref="my({id:2})">关于我们</a></li>
        <li><a ui-sref-active="active" ui-sref="contact({id:3})">联系我们</a></li>
    </ul>
</div>

多视图

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $stateProvider.state('index',{
        url:'/index',
        //这里是 views 不是 view 注意
        views:{
            head:{
                template:'<h1>头部</h1>'
            },
            left:{
                template:'<h1>左侧</h1>'
            },
            right:{
                template:'<h1>右侧</h1>'
            },
        }
    }) ;
    $urlRouteProvider.otherwise('/index');
}])

<div ui-view = 'head'></div>
<div>
    <div ui-view = 'left'></div>
    <div ui-view = 'right'></div>
</div>

路由嵌套

  app.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
            //在代码中路由切换都是以state进行。
            $stateProvider.state('home',{
                url:'/home',
                templateUrl:'home_tpl.html',
                controller:'xmgController'
            }).state('home.login',{
                url:'/login',
                template:'<h1>登录信息</h1>'
            }).state('home.regist',{
                url:'/regist',
                template:'<h1>注册信息</h1>'
            }).state('my',{
                url:'/my',
                template:'<h1>my</h1>'
            }).state('contact',{
                url:'/contact',
                template:'<h1>contact</h1>'
            });
            $urlRouterProvider.otherwise('home');  //（设置默认url）
        }]);

        //2.创建控制器
        app.controller('xmgController', ['$scope','$state','$stateParams', function ($scope,$state,$stateParams) {
            $state.go('home.login');
        }]);

home_tpl.html

<h1>首页</h1>
<a ui-sref="home.login">登录</a>
<a ui-sref="home.regist">注册</a>

<div ui-view>

</div>