[AngularJS] AngularJS系列(2) 中级篇之路由
目录
原理
ng的route本质是监听hashchange事件.
在angular-route中
$rootScope.$on('$locationChangeStart', prepareRoute);
$rootScope.$on('$locationChangeSuccess', commitRoute);
在ui-router中
listener = listener || $rootScope.$on('$locationChangeSuccess', update); ... scope.$on('$stateChangeSuccess', function() {
updateView(false);
});
...
angular-route
Hello World
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#index">index</a>
<a href="#home">home</a>
<div ng-view></div>
<script>
angular.module('myApp', ['ngRoute'], ['$routeProvider', function ($route) {
$route.when('/index', { template: 'Index' })
.when('/home', { template: 'Home' })
.otherwise('index');
}]);
</script>
</body>
</html>
以上为最简单的ngRoute Hello World
可参考官方API:
https://docs.angularjs.org/api/ngRoute
这里再展示1个稍微完整点的Demo
<div ng-controller="MainController">
Choose:
<a href="#Book/Moby">Moby</a> |
<a href="#Book/Moby/ch/1">Moby: Ch1</a> |
<a href="#Book/Gatsby">Gatsby</a> |
<a href="#Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="#Book/Scarlet">Scarlet Letter</a><br /> <div ng-view></div> <hr /> <pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.template = {{$route.current.template}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
<script>
angular.module('myApp', ['ngRoute'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.controller('BookController', function ($scope, $routeParams) {
$scope.name = 'BookController';
$scope.params = $routeParams;
})
.controller('ChapterController', function ($scope, $routeParams) {
$scope.name = 'ChapterController';
$scope.params = $routeParams;
})
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
template: 'controller: {{name}}<br />Book Id: {{params.bookId}}<br />',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
template: 'controller: {{name}}<br />Book Id: {{params.bookId}}<br />Chapter Id: {{params.chapterId}}',
controller: 'ChapterController'
});
});
</script>
ui-router
Hello World
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<div ui-view></div>
<script>
angular.module('myApp', ['ui.router'], ['$stateProvider', function ($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
} var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
} $stateProvider.state(helloState).state(aboutState);
}]);
</script>
</body>
</html>
以上展示了ui-router基本的用法
事件
和ngRoute相同的是,angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听$scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在$rootScope上触发,因此在任何$scope对象上都可以监听到这些事件。
状态改变事件
$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams), { // 如果需要阻止事件的完成 evt.preventDefault();});
可以触发的事件包括:
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发,错误通常是目标无法载入,需要预载入的数据无法被载入等。
视图载入事件
视图载入阶段ui-router也提供了一些事件
$viewContentLoading
当视图正在被载入且在DOM被渲染之前触发。
$scope.$on('$viewContentLoading', function(event, viewConfig){ // 获取任何视图设置的参数,以及一个特殊的属性:viewConfig.targetView});
$viewContentLoaded
当视图被载入且DOM已经渲染完成后被触发。
在事件中,再多说2句:
在源码中的3151行,定义了路由跳转方法.
$state.transitionTo = function transitionTo(to, toParams, options) {
在方法中,ui-router 调用$rootScope.$broadcast,进行了广播事件.
而$broadcast,$emit以及$on不是本节重点内容,这里做简单介绍:
$broadcast:向当前和子scope中 触发事件.
$emit:向当前和父scope中 触发事件
$on:在当前scope中 定义事件
同样的,在ngRoute中,也定义了一些事件
如:$routeChangeStart、$routeChangeSuccess、$routeChangeError
深度路由(嵌套路由)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
</head>
<body>
<h1>深度路由</h1>
<div ui-view></div>
<script>
angular.module('myApp', ['ui.router'], ['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("PageTab", {
url: "/PageTab",
template: '<span style="width:100px" ui-sref=".Page1"><a href="#">Page-1</a></span><span style="width:100px" ui-sref=".Page2"><a href="#">Page-2</a></span><span style="width:100px" ui-sref=".Page3"><a href="#">Page-3</a></span> <div ui-view/>'
})
.state("PageTab.Page1", {
url: "/Page1",
template: "Page-1"
})
.state("PageTab.Page2", {
url: "/Page2",
template: "Page-2"
})
.state("PageTab.Page3", {
url: "/Page3",
template: "Page3"
});
$urlRouterProvider.otherwise('PageTab');
}]);
</script>
</body>
</html>
可参考:
ui-router GitHub(https://github.com/angular-ui/ui-router/wiki)
本文地址:http://www.cnblogs.com/neverc/p/5907693.html
[AngularJS] AngularJS系列(2) 中级篇之路由的更多相关文章
- Kotlin——从无到有系列之中级篇(四):面向对象的特征与类(class)继承详解
如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索 QQ群号:497071402 进入正题 在前面的章节中,详 ...
- [AngularJS] AngularJS系列(4) 中级篇之指令
目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 ...
- [AngularJS] AngularJS系列(3) 中级篇之表单验证
目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...
- [AngularJS] AngularJS系列(6) 中级篇之ngResource
目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: me ...
- [AngularJS] AngularJS系列(5) 中级篇之动画
目录 CSS定义 JS定义 ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): H ...
- WebApi学习总结系列第四篇(路由系统)
由于工作的原因,断断续续终于看完了<ASP.NET Web API 2 框架揭秘>第二章关于WebApi的路由系统的知识. 路由系统是请求消息进入Asp.net WebApi的第一道屏障, ...
- 阿里巴巴笔试整理系列 Session2 中级篇
1知识点储备-----2笔试题总结-----3面试经验总结 知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- angularjs自动化测试系列之jasmine
angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- Android(蓝牙)
因近期项目需求调试了Android蓝牙通讯接口,主要是两个终端作为服务端和客户端的通信,本文将部分重要知识点记录如下. 蓝牙是短距离无线通信,通常分经典蓝牙和低功耗蓝牙(即蓝牙4.0),两类蓝牙协议各 ...
- Java虚拟机12:Java内存模型
什么是Java内存模型 Java虚拟机规范中试图定义一种Java内存模型(Java Memory Model,JMM)来屏蔽掉各种硬件和操作系统的访问差异,以实现让Java程序在各种平台下都能达到一致 ...
- Aoite 系列 目录
介绍 本项目从2009年孵化(V->Sofire->Aoite),至今已度过5个年头.一直在优化,一直在重构,一直在商用.有十分完整的单元测试用例.可以放心使用. Aoite on 博客园 ...
- C#Lite Unity热更新开源解决方案改名C#Light
因为此脚本语言与C#Lite Framework 开源项目重名,故修改名称,发音不变.
- web系统架构设计中需要知道的点(前端篇)
上周没写东西,这周写点互联网系统开发中需要了解的技术点,每个点都可以发散出去,连接更多的知识点,打算做个逐步细化的记录. 一个应用的整个生命周期中(生,老,病,死)都需要有一个整体规划. 前期 评估需 ...
- PowerDesigner实用操作
1. 让PhysicalDiagram里的表显示字段名Tools→Display Preferences→在General Settings里选择Table→点击Advanced→选择Form下的Co ...
- “你没有权限登录JIRA”的解决办法
为了更好的做部门的项目管理,部门老大让运维部署了一个jira系统.这两天让我试用并摸索如何用. jira默认的用户组有 jira-administrators.jira-developers.jira ...
- VUE 意淫笔记
caihg Vue.js 递归组件实现树形菜单 最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: 1 2 3 4 5 6 7 8 9 i ...
- EF架构~二级域名中共享Session
回到目录 对于一个有点规模的网站,都会有各个子网站,说是子网站,其实也都是独立的站点,一般通过二次域名来分开,如www.zzl.com,它可以有很多子网站,如image.zzl.com,file.zz ...
- Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性
Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性 Keyword Java ee5 ,Java ee6,Java ee7 j2ee5 jee5 j2ee6 j2 ...