angular路由——ui.route
angular路由
###使用案例
```
test
```
`time.html`
```
金刚葫芦娃
```
路由控制器使用
- 注：不需要在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>
angular路由——ui.route的更多相关文章
- angular路由配置以及使用
一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- 阿里云 Angular 2 UI框架 NG-ZORRO介绍
说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- 用于实现tab页签切换页面的angular路由复用策略
使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...
随机推荐
- 来玩Play框架07 静态文件
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Play框架的主要功能是提供动态响应的内容.但一个网络项目中必然有大量的静态内容, ...
- Java设计模式——线程安全的单件模式
单件模式,也称单例模式,用以创建独一无二的.只能有一个实例的对象. 单件模式的类图是所有模式的类图中最简单的--只有一个类.尽管从类设计的视角来看单件模式很简单,但是实现上还是会遇到一些问题,本文着重 ...
- NodeJs端口被占用的情况
在NodeJs运行的时候,我们往往会遇到一个问题:“端口被占用”,这个问题,我们的处理办法有哪些呢? 这里我只介绍一下linux下的方法: 1.使用nodeme(忘记是不是这个啦,回去查下,这个要安装 ...
- SVG动画
动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...
- 我的屌丝giser成长记-研一篇（下）
研一生活的下学期开始,课程就比较少了,加上选修课,4门课而已,总体还是比较轻松的,让我有更过充裕时间来做自己的事情以及导师的项目.开始导师的一个新的webgis开发项目,叫做三峡库区事故型水环境污染风 ...
- 带调试器(Debugger)的ILSpy(2.2.0.1738)
2015-03-13 09:40更新: 感谢@dark89757园友提出的调试时不能查看变量的问题. 源码已修改,并提交到了github. 请查看最新发布,二进制文件和源码都在这里: 调试时可查看变量 ...
- Linux系统sar命令解析
安装 如果系统没有该命令请安装: apt-get install sysstat yum install sysstat 安装完毕: vi /etc/default/sysstat ENABLED=& ...
- Oracle 用户、角色、权限（系统权限、对象权限）的数据字典表
1 三者的字典表 1.1 用户 select * from dba_users; select * from all_users; select * from user_users; 1.2 角色 s ...
- java在类定义时对hashset的便捷初始化方法
有时候我们在类成员定义时,当这个类成员类型为 HashSet时,我们可以不方便调用 add函数进行初始化,所以可以采用下面的便捷方式来进行初始化 public class MyTest{ final ...
- Solr实战:使用Hue+Solr实现标签查询
公司最近在研究多条件组合查询方案,Google的一位技术专家Sam和我们讨论了几个备选方案. Sam的信: 我做了进一步研究,目前有这么几种做法: 1) 最直接粗暴,只做一个主index,比如按行业+ ...