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>

转载于:https://www.cnblogs.com/songrimin/p/6547773.html

angularjs ui-router 路由简介相关推荐

AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
前端路由简介以及vue-router实现原理
后端路由简介路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求服务器监听到80端口( ...
akka 简介_Akka HTTP路由简介
akka 简介 by Miguel Lopez 由Miguel Lopez Akka HTTP路由简介 (An introduction to Akka HTTP routing) Akka HTTP ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
iOS开发UI篇—CALayer简介
iOS开发UI篇-CALayer简介一.简单介绍在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. 其实UI ...
[Angularjs]视图和路由（三）
写在前面上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...

angularjs ui-router 路由简介

angularjs ui-router 路由简介相关推荐

最新文章

热门文章