angularjs ui-router 路由简介
Posted 野紫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于angularjs ui-router 路由简介的主要内容，如果未能解决你的问题，请参考以下文章