angularjs ui-router 路由简介

ui-router 是angular的第3方路由。他与ngrouter 没有太大区别。

ui-router 可以深度嵌套

ngrouter 简单的嵌套，针对于单个视图（视图就是需要嵌套的页面）

 

例如：我们点击了一个链接，我们需要在视图中跳转到指定的一个页面，那么ngRoute已经满足了我们的需求，而当我们点击的时候，需要在分别在不同的地方跳转两个不同的页面的时候，ngRoute就不够用了，我们就需要用到ui-router

$urlRouterProvider

$urlRouterProvider负责监听$location.当$location变化的时候，$urlRouterProvider开始在一个规则的列表中一个个的查找，直到找到匹配的值。

$urlRouterProvider用于在后端指定url的状态配置。

所有的url被编译成UrlMatcher对象。

otherwise

定义一个当请求的路径是无效路径时跳转的路径，或者首次加载的时候加载指定路径

 $urlRouterProvider.otherwise('/home');

 

以下是一个简单的demo

 <script type="text/javascript">
      var myapp=angular.module('route',["ui.router"]);
      myapp.controller('myctr',function($scope){
         $scope.isActive = true; 
        // $scope.togg = function($event) {  
         
        //   console.log(value)  
        //   if ($event) {  
        //     $($event.target).addClass("active");  
        //   } else {  
        //     $($event.target).removeClass("active");  
        //   }  
        // }  

      })
      myapp.config(function($stateProvider,$urlRouterProvider){
        $urlRouterProvider.otherwise('/home');
        $stateProvider
          .state('home',{
            url:'/home',
            templateUrl:'html/home.html'
          })
          .state('home01',{
            url:'/home01',
            templateUrl:'html/home01.html'
          })
          .state('home01.list',{
            url:'/list',
            templateUrl:'html/table.html'
          })
          .state('home01.pan',{
            url:'/pan',
            templateUrl:'html/panel.html'
          })
      })

  </script>
</head>
<body>
<div ng-app='route'>
<nav class="navbar navbar-default" ng-controller='myctr'>
  <div class="container">
    <ul class="nav navbar-nav">
        <li ng-class="{true: ' active', false: ''}[isActive]" ng-click='isActive=true'><a ui-sref="home">Home</a></li>
       
        <li ng-class="{true: ' ', false: ' active'}[isActive]" ng-click='isActive=false'><a ui-sref="home01">Link</a></li>
    </ul>
  </div>
</nav>
<!-- 切换的内容显示 -->
<div ui-view style='padding:20px;overflow:hidden'></div>
</div>

 

posted @ 2017-03-14 11:55  野紫  阅读(603)  评论(0)  编辑  收藏  举报