angular路由——ui.route

angular路由


使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body ng-app="myApp">
 <a href="" ui-sref="lol">首页</a>  <!-- ui-serf的值对应state的第一个参数 -->
 <a href="#/dota">游戏</a>              <!-- ui-serf的值对应state的url参数 -->
 <div ui-view></div>
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>
<script>
var app = angular.module("myApp", ['ui.router']);    //将ui.router模块继承下来
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  //默认路由,与下面定义的路由匹配
  $urlRouterProvider.otherwise('/lol');
  //路由定义规则
  $stateProvider
          .state('lol', {        //必须有一个默认路由
            url:'/lol',              //路由地址,即锚点
            templateUrl: 'time.html' //使用外部模板
          })
          .state('dota', {
            url:'/dota',
            template: '<h1>王者荣耀</h1>'
          })
}])
</script>
</body>
</html>

time.html

<h1>金刚葫芦娃</h1>

路由控制器使用

  • 注:不需要在html中定义控制器
var app = angular.module("myApp", ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  //默认路由,与下面定义的路由匹配
  $urlRouterProvider.otherwise('/lol');
  //路由定义规则
  $stateProvider
          .state('lol', {
            url:'/lol',
            templateUrl: 'time.html',
            controller: ['$scope',function($scope){   //直接在内部写控制器
            
            }]
          })
          .state('dota', {
            url:'/dota',
            template: '<h1>王者荣耀</h1>',
            controller: 'ctrl'                        //引入外部控制器
          })
app.controller("ctrl", ['$scope', function($scope){
             
            }]);

$state服务

  • 实现路由中转
  • 判断用户是否登录,若未登录,则跳转到登录页面
app.controller("ctrl", ['$scope','$state', function($scope,$state){
              $scope.go = function(url){ //这里的方法随便命名
                  $state.go(url);    //$state的go方法实现跳转,这个方法必须是go方法
              }

time.html

<button ng-click="go('dota')">跳转</button> <!-- 这里的方法随便命名,点击后跳转到指定路由,不要加‘/ ’-->

$stateParams

  • 在dota路由处加上{id},显示数据id
  • 模板处加上ui-sref="dota({id:v.id}),实现 跳转到dota路由,并显示id
var app = angular.module("myApp", ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  //默认路由,与下面定义的路由匹配
  $urlRouterProvider.otherwise('/lol');
  //路由定义规则
  $stateProvider
          .state('lol', {
            url:'/lol',
            templateUrl: 'time.html',
            controller: ['$scope',function($scope){   //直接在内部写控制器
            
            }]
          })
          .state('dota', {
            url:'/dota{id}',                          //要加上{id},才会显示id
            template: '<h1>王者荣耀</h1>',
            controller: 'ctrl'                        //引入外部控制器
          })
app.controller("ctrl", ['$scope','$stateParams', function($scope,$stateParams){
              $scope.data = [
              {id:1,name:"刘恺威",title:"王鸥"},
              {id:2,name:"飞刀又见飞刀",title:"李元芳"}
              ];
              var id = $stateParams.id;
              if(id){
                for(var i=0;i<$scope.data.length;i++){
                  if(id==$scope.data[i].id){
                      $scope.name=$scope.data[i].name;
                  }
                }
              } 
            }]);

time.html

<ul ng-repeat="v in data">
   <li><a href="" ui-sref="dota({id:v.id})">{{v.name}}</a></li>  <!-- 跳转到dota路由,并显示id -->
</ul>
<p>{{name}}</p>

父子嵌套路由

  • 将父级路由模板内加入<div ui-view></div>,子级模板内容会在父级模板中显示,最后一起通过父级路由加载到首页的<div ui-view></div>
  • 写法一 lol.dota,父级下的路由
  • 写法二 parent:lol,指定该路由的父级
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body ng-app="myApp">
 <a href="" ui-sref="lol">首页</a>  <!-- ui-serf的值对应state的第一个参数 -->
 <a href="" ui-sref="lol.dota">游戏</a>              <!-- ui-serf的值对应state的url参数 -->
 <a href="" ui-sref="youku">视频</a>
 <div ui-view></div>                                <!-- 首页的<div ui-view></div> -->
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>
<script>
var app = angular.module("myApp", ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  //默认路由,与下面定义的路由匹配
  $urlRouterProvider.otherwise('/lol');
  //路由定义规则
  $stateProvider
          .state('lol', {
            url:'/lol',
            templateUrl: 'time.html',
          })
          .state('lol.dota', {                        //父级下的路由写法
            url:'/lol.dota',
            template: '<h1>王者荣耀</h1>',
          })
          .state('youku', {
            url:'/youku',
            template: '<h1>黑海夺金</h1>',
            parent:'lol'                              //指定该路由的父级
          })
}])
</script>
</body>
</html>

time.html

<h1>金刚葫芦娃{{name}}</h1>
<div ui-view></div>     <!-- 将父级路由模板内加入<div ui-view></div>,子级模板内容会在父级模板中显示 -->

ui.route视图概念——ui-view

  • 本案例效果为T字型网页,点击左侧导航栏,改变右侧显示
  • views里写ui-view对应的视图
  • 左侧模板,可以点击跳转到不同路由,从而改变右侧视图显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
      div[ui-view="left"]{background-color: #ccc; float:left;}
      div[ui-view="right"]{}
    </style>
</head>
<body ng-app="myApp">
 <div ui-view="top"></div>
 <div ui-view="left"></div>
 <div ui-view="right"></div>
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"></script>
<script>
var app = angular.module("myApp", ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
  //默认路由,与下面定义的路由匹配
  $urlRouterProvider.otherwise('/my');
  //路由定义规则
  $stateProvider
          .state('my', {
            url:'/my',
            views: {                             //显示ui-view中的视图
              top:{templateUrl: 'time.html'},
              left:{templateUrl: 'left.html'},
              right:{templateUrl: 'right.html'}
            }
          })
          .state('game', {
            url:'/game',
            views: {
              top:{templateUrl: 'time.html'},
              left:{templateUrl: 'left.html'},
              right:{templateUrl: 'game.html'}
            }
          })
}])
</script>
</body>
</html>
time.html
<h1>童年</h1>
left.html
<div><a href="#/my">动画</a></div>           <!-- 点击切换到不同的路由 -->
<div><a href="" ui-sref="game">游戏</a></div>
right.html
<h1>金刚葫芦娃</h1>
game.html
<h1>超级玛丽</h1>



posted @ 2017-01-06 00:37 Tooann 阅读(...) 评论(...) 编辑 收藏