angular 系列八 ui-router详细介绍及ngRoute工具区别
我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.
angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.
angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.
后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.
UI-Router是Angular-UI提供的客户端路由框架,它解决了原生的ng-route的很多不足:
- 视图不能嵌套。这意味着
$scope
会发生不必要的重新载入。 - 同一URL下不支持多个视图。这一需求也是常见的:我们希望导航栏用一个视图(和相应的控制器)、内容部分用另一个视图(和相应的控制器)。
UI-Router提出了$state
的概念。一个$state
是一个当前导航和UI的状态,每个$state
需要绑定一个URL Pattern。 在控制器和模板中,通过改变$state
来进行URL的跳转和路由。
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工具.用于管理未知的URL(统一跳转到某处)。
二是监听浏览器地址栏URL的变化,重定向到路由定义的状态中。
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$urlRouterProvider.when('/legacy-route', {redirectTo: '/'});
}]);
总之,$urlRouterProvider让我们处理状态机抽象的$stateProvider没有检测到的情况。
下面详细说下 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){ ... });
转自:http://yijiebuyi.com/blog/3aab7ad8bccb22b4a881849c0593d5e2.html
angular 系列八 ui-router详细介绍及ngRoute工具区别相关推荐
- Hadoop系列 (九):Sqoop详细介绍
文章目录 Hadoop系列文章 Sqoop简介 Sqoop架构 Sqoop数据导入 Sqoop数据导出 Sqoop安装部署 版本介绍 前提环境 下载 安装配置 Sqoop的使用 构建测试数据 将MyS ...
- Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
转载自 Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例 第1部分 ArrayList介绍 ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与 ...
- RapidScada免费开源Scada组态软件系列教程4-各模块详细介绍
RapidScada免费开源Scada组态软件系列教程 系列文章目录 RapidScada免费开源Scada组态软件系列教程1-初识RapidScada RapidScada免费开源Scada组态软件 ...
- Hadoop系列 (三):HDFS详细介绍
文章目录 Hadoop系列文章 HDFS简介 HDFS基本概念 分布式文件系统特点 HDFS设计目标 HDFS架构 HDFS应用场景 HDFS三大组件 NameNode SecondaryNameNo ...
- Simulink系列 - simulink模块库详细介绍
(原创文章,转载请与作者联系,本文Matlab版本 R2019a) 往期回顾:SImulink仿真系列 - Simulink信号观察模块详解 上一篇:基于Matlab-Simulink 的 2FSK ...
- d06调试详细说明_PIC系列单片机配置字详细介绍(长期实践总结的压箱底资料)
(注:本文档主要根据PIC16F193X数据手册编写,对于其他型号的单片机,其配置字可能略有不同,此外本文部分参考了PIC18F78K22数据手册,因而部分注释了两个系列单片机的区别) 1.FCMEN ...
- 【Linux入门到精通系列讲解】Nginx详细介绍和安装使用(这一篇就够了)
文章目录 1 Nginx 介绍 2 简单请求和非简单请求 3 正向代理和反向代理 4 apache与nginx的区别 5 Nginx 在Ubuntu 上的安装,测试 5.1 Install 5.2 防 ...
- Java 集合系列16之 HashSet详细介绍(源码解析)和使用示例
概要 这一章,我们对HashSet进行学习. 我们先对HashSet有个整体认识,然后再学习它的源码,最后再通过实例来学会使用HashSet.内容包括: 第1部分 HashSet介绍 第2部分 Has ...
- Java 集合系列17之 TreeSet详细介绍(源码解析)和使用示例
转载 http://www.cnblogs.com/skywang12345/p/3311268.html 转载于:https://www.cnblogs.com/lizhouwei/p/917493 ...
最新文章
- 根据status信息对MySQL服务器进行优化-1
- 电信业务支撑报表开发工具解决方案
- UIImagePikerController 浅析
- corners边框_安卓中设置(shape)圆角背景和边框(stroke)相关的问题
- 网页制作中如何自定义网页图标
- shell 结束指定端口
- iOS 信号量解决-网络异步请求的数据同步返回问题
- 支持x64的开发工具
- android office转pdf插件,office另存为pdf插件下载
- Fast R-CNN算法
- STM32F1xx_StdPeriph_Driver——I2C
- 什么是python语言的解释性?
- Java设计模式——工厂模式——模拟Spring
- poi根据模板导出word(包含图片、动态生成表格、合并单元格)(亲测有效)
- iCheck的使用示例
- Mybatis 批量插入数据 关于Oracle 批量插入
- Unity3D GPU Instancing测试
- PB连接SQLServer数据库
- C语言程序设计--结构体--计算该日是在本年中是第几天
- 情感溢出:读《浣溪沙》
热门文章
- LaTex的安装(Windows)2022船新版本
- OSAL移植到STM8
- 安装TIA博途V14 SP1后,打开软件时系统提示出现一个并行的错误_解决办法
- php判断星期几switch,PHP实现今天是星期几的几种写法
- MSP430单片机各种寄存器总结(1)——CPU 寄存器
- uiautomator2使用教程
- NOIp2015 题解
- SketchUp二次开发之鼠标工具
- Vue2.0实现炫酷的主题切换功能
- 【golang】go-admin系统进行项目开发,还是一个非常不错的项目,使用golang做管理后台,非常方便项目的快速搭建,基础功能鉴权已经完善了,就需要开发相关的业务逻辑即可。