ui-router详解(二)ngRoute工具区别
我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.
angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.
angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.
后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.
ngRoute
使用时需要ui中用ng-view指令指定 如:<div ng-view></div>
url改变此区域会被刷新.
首先要配置注册 ngRoute
var app = angular.module(“YIJIEBUYI", ['ngRoute']);
app.config(function ($locationProvider) {
});
路由设置:
angular.module(‘YIJIEBUYI').config(['$urlRouterProvider',
function($urlRouterProvider) {
$urlRouterProvider
.when(“/blog", “/blog/index")
.otherwise("/blog/index");
});
ui-router
使用时需要ui中用ui-view指令指定 如:<div ui-view></div>
需要下载 ui-route 文件.
首先配置注册 ui-route
var app = angular.module(“YIJIEBUYI", [‘ui.router']);
app.config(function () {
//路由配置
});
路由设置:
angular.module(‘YIJIEBUYI').config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('blog',{
url:'/blog',
views:{
'container':{templateUrl:'templates/blog/layout.html'}
}
}).state('blog.index',{
url:'/index',
views:{
'container':{templaterUrl:'templates/blog/index.html'}
}
})
});
ngRoute 和 ui-route 相比:
$route —> $state
$routeParams —> $stateParams
$routeProvider —> $stateProvider
<div ng-view></div> —> <div ui-view></div>
设置路由相比:
$urlRouterProvider.otherwise('/blog/index'); 设置默认路由还需要使用ngRoute来设置.
$stateProvider.state(‘blog.index', {url:’….’,views:{模板路径}); 见上面设置信息.
所以我们在上一篇博文简单介绍 ui-route路由控制器中既使用了ngRoute 也使用了 ui-route,就是因为
设置默认页还是要用到 ngRoute工具.
下面详细说下 ui-route 使用:
(1)父路由,子路由
ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.
如下面路由:
angular.module(‘YIJIEBUYI').config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('blog',{
url:'/blog',
views:{
'container':{templateUrl:'templates/blog/layout.html'}
}
}).state('blog.index',{
url:'/index',
views:{
'container':{templaterUrl:'templates/blog/index.html'}
}
})
});
blog 对应的路由是 /blog
blog.index 对应的路由就是 /blog/index (前面的/blog就是从父view中继承过来的)
blog.index 就是 blog的子view
(2)指定响应的view
<div ui-view="view1"></div>
<div ui-view="view2"></div>
.state("blog.detail"),{
url:”/:blogID"
,views:{
view1:{
templateUrl:"view1.html"
}
,view2:{
templateUrl:"view1.html"
}
}
}
(3) state 配置参数
url:默认相对路径(以^开头的是绝对路径)
views:每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)
abstract:抽象模板不能被激活
template: HTML字符串或者返回HTML字符串的函数
如:
$stateProvider.state(‘blog.detail', {
template: '<h1>My Blog</h1>'
})
templateUrl: HTML模板的路径或者返回HTML模板路径的函数
如:
$stateProvider.state(‘blog.detail', {
templateUrl: ’templates/blog_detail.html'
})
templateProvider:返回HTML字符串的函数
如:通过函数返回html
$stateProvider.state(‘blog.detail', {
templateProvider: function ($timeout, $stateParams) {
return $timeout(function () {
return '<h1>' + $stateParams.blogID + '</h1>'
}, 100);
}
})
controller、controllerProvider:指定任何已经被注册的控制器或者一个作为控制器的函数
resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。
data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。
onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数
(4)解决器 Resolve
可以使用 Resolve 为控制器提供可选的依赖注入项。
Relolve 是由 key/value 组成的键值对象.
key – {string}:注入控制器的依赖项名称。
value - {string|function}:
string:一个服务的别名
function:函数的返回值将作为依赖注入项,如果函数是一个耗时的操作,那么控制器必须等待该函数执行完成(be resolved)才会被实例化。
比如,博客后台的视图都需要登录用户才能访问,那么判断是否登录就可以做成一个控制器依赖
$stateProvider.state(‘YIJIEBUYI', {
url: “/admin",
// 登录后才能访问
resolve: {authentication:[‘YijiebuyiAuth', '$q', function(YijiebuyiAuth, $q){
return $q.when().then(function(){
return YijiebuyiAuth.authentication();
});
}]},
views: {
container: { templateUrl: “templates/admin_manage.html" }
}
})
在上面的返回函数中我们注入了一个服务 YijiebuyiAuth ,这个服务里实现了登录判断的方法 authentication
(5)$state 对象提供自定义数据
$stateProvider
.state(‘blog.index', {
templateUrl: ’templates/blog_index.html',
data: {
current_page: 1,
page_size: 20
}
})
上面 data 对象就是自定义数据,
里面定义了2页面的当前页和显示内容条数
在视图对应的 controller 中我们就可以通过下面的方法来获取自定义数据.
console.log($state.current.data.current_page); // 1
console.log($state.current.data.page_size); // 20
(5) onEnter 和 onExit 回调函数
onEnter: 当状态活跃时触发 什么是活跃???页面正在加载中…..我也求解!
onExit : 当状态不活跃时触发 什么是不活跃?? 页面加载完成...同求解!
$stateProvider.state("blog.detail", {
template: '<h1>blog</h1>',
resolve: { title: '一介布衣' },
controller: function($scope, title){
$scope.title = title;
},
// title 是解决依赖项注入控制器
onEnter: function(title){
if(title){ ... do something ... }
},
// title 是解决依赖项注入控制器
onExit: function(title){
if(title){ ... do something ... }
}
})
所以,刚才上面做的解决依赖判断是否登录,完全可以在 onEnter 事件中判断登录状态,如果未登录,直接跳转到其他路由即可.
(6) 页面跳转
<a href="#/blog/1234”>博客详情</a>
<a ui-sref=“blog.detail({blogID:blogID})”>博客详情</a>
$state.go(‘blog.detail', {blogID:blogID});
(7) 事件
state事件
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })
$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })
view事件
View被加载但是DOM树构建之前时:
$scope.$on('$viewContentLoading', function(event, viewConfig){ ... });
View被加载而且DOM树构建完成时:
$scope.$on('$viewContentLoaded', function(event){ ... });
ui-router详解(二)ngRoute工具区别的更多相关文章
- Android Studio 插件开发详解二:工具类
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/78112856 本文出自[赵彦军的博客] 在插件开发过程中,我们按照开发一个正式的项 ...
- 详解JDBC与Hibernate区别
详解JDBC与Hibernate区别 引用地址:http://www.cnblogs.com/JemBai/archive/2011/04/13/2014940.html 刚开始学习JAVA时,认为H ...
- HTTPS详解二:SSL / TLS 工作原理和详细握手过程
HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...
- Shiro 安全框架详解二(概念+权限案例实现)
Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...
- 详解LUA开发工具及其环境配置
LUA开发工具及其环境配置是本文要介绍的内容,主要是来了解并学习lua开发工具的使用和环境的配置,第一次接触LUA的话,就跟本人一起学习吧.看我能不能忽悠到你. LUA是语言,那么一定有编写的工具.第 ...
- .NET DLL 保护措施详解(二)关于性能的测试
先说结果: 加了缓存的结果与C#原生代码差异不大了 我对三种方式进行了测试: 第一种,每次调用均动态编译 第二种,缓存编译好的对象 第三种,直接调用原生C#代码 .net dll保护系列 ------ ...
- PopUpWindow使用详解(二)——进阶及答疑
相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- logback -- 配置详解 -- 二 -- <appender>
附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...
随机推荐
- 魅族MX4的线控电路图
- Could not connect to Redis at 192.168.0.129:6379: Connection refused
在虚拟机上(CentOS 6.7)本机连接自己的redis [root@localhost bin]# ./redis-cli -h Could not connect to Redis at : C ...
- go语言基础之类型别名
1.类型别名 示例: package main //必须有一个main包 import "fmt" func main() { //给int64起一个别名叫bigint type ...
- 类的const和非const成员函数的重载
我们从一个例子说起,来看上一篇文章中的String类, 我们为它提供一个下标操作符([ ])以读写指定位置的字符(char). 只要了解过C++的操作符重载的语法,很快就可以写出下面这个[]操作符重载 ...
- MS SQL 中判断 数据库, 存储过程,表,临时表,视图,函数,用户,用户创建对象 等是否存在 SQL脚本
摘自: http://www.111cn.net/database/mssqlserver/39107.htm sql判断存储过程是否存在 判断数据库教程是否存在 Sql代码 if exists (s ...
- Python+Django+SAE系列教程13-----MySQL记录的添\删\改
建立了数据库后,我们就来做一个简单的表(person_classroom)的加入.删除.改动的操作. 首先我们建立一个加入的页面的模板Classroom_Add.html(加入的表单)并把它放在Bid ...
- Trie树统计单词前缀
输入 输入的第一行为一个正整数n.表示词典的大小,其后n行,每一行一个单词(不保证是英文单词,也有可能是火星文单词哦).单词由不超过10个的小写英文字母组成,可能存在同样的单词.此时应将其视作不同的单 ...
- Makefile 编译静态库
CC = gcc AR = ar FLAGS = -Wall -lpthread CLOUD = cloud_server OBJ += cloud_server.o LIB = libccloud. ...
- Dreamweaver界面主要菜单功能介绍
启动界面有四个功能:主要使用新建HTML,其中HTML有很多版本,由于国内IE6.0占据了将近百分之七十的比例,所以最新的HTML1.1对他支持的不好,我们主要使用XHTML 1.0 Transiti ...
- ireport制作报表pageheader只在第一页出现的解决办法
这问题居然没找到解决办法..... 好吧,那我自己解决..... 其实很简单..... 只要打开ireport,pageheader的属性,在print when expression设置$V{PAG ...