AngularJS1.X学习笔记13-路由
ThinkPHP框架有路由的概念，看起来路由更多的是后端的事情，Angular怎么也会跑出个路由呢？事实上，Angular是着眼于单页应用的，他的一个应用一般来说是一个页面，你所看到的页面内容的改变，事实上只改变了URL地址的#后面的内容。路由要解决的是hash值与视图的对应关系。
一、从一个简单的例子开始
1、安装angular-route模块
2、试一下子看看
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>route test</title>
</head>
<body>
<h1>This is fixed part</h1>
<ul>
<li><a href="./">home</a></li>
<li><a href="./#!/page1">page1</a></li>
<li><a href="./#!/page2">page2</a></li>
<li><a href="./#!/page3">page3</a></li>
</ul>
<div ng-view></div>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript">
angular.module("myApp",['ngRoute'])
.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/page1",{
templateUrl:"./1.html"
}).when("/page2",{
templateUrl:"./2.html"
})
.when("/page3",{
templateUrl:"./3.html"
})
.otherwise({
templateUrl:"./home.html"
});
})
</script>
</body>
</html>
我发现几乎所有人将路由时都是host/path/#/XX这样的模式，而我发现地址栏并不是如此，地址栏的路径是：http://127.0.0.1/Angular/route/#!/page3。所以上面的a的href有一个奇怪的！。这里不知道是什么情况，请知道的大神指点一下。
Angular的路由依赖ngRoute模块，需要一个$routeProvider的服务，用一个ng-view指令指定路由的视图。
二、路由传参
路由传参是必要的，比如从一个列表页进入一个详情页，需要将被点击的项的id穿过去。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>route test</title>
</head>
<body ng-controller="getCtrl">
<h1>This is fixed part</h1>
<ul>
<li><a href="./">home</a></li>
<li><a href="./#!/page1/{{1}}">page1</a></li>
<li><a href="./#!/page2/{{2}}">page2</a></li>
<li><a href="./#!/page3/{{3}}/我是一个小傻瓜/乌拉啦五">page3</a></li>
</ul>
<div>参数id为:{{id || "unknown"}}</div>
<div>参数data为:{{data || "unknown"}}</div>
<div ng-view></div>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript">
angular.module("myApp",['ngRoute'])
.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/page1/:id",{
templateUrl:"./1.html"
})
.when("/page2/:id",{
templateUrl:"./2.html"
})
.when("/page3/:id/:data*",{
templateUrl:"./3.html"
})
.otherwise({
templateUrl:"./home.html"
});
})
.controller("getCtrl",function($location,$routeParams,$scope){
$scope.$on("$routeChangeSuccess",function(){
if($location.path().indexOf("/page")==0){
var id = $routeParams["id"];
var data = $routeParams['data'];
$scope.id = id;
$scope.data = data;
}
})
})
</script>
</body>
</html>
这里用到了两种传递参数的模式，：id和：data*,前者匹配到下一个/而后者匹配到结束。关于获取参数，我们用到了$routeParams服务，我们侦听路径改变事件，并判断一下是不是我们要获取参数的路径，然后就可以比较容易的拿到参数了。这是一件很棒的事。
这里介绍一下$route服务
上面显示了$route服务对象，reloac（）用于重载视图，$route返回通过$routeProvider定义的路由集合,current返回当前路由信息对象。
一些事件
| 事件名 | 触发条件 |
| $routeChangeStart | 路由改变前 |
| $routeChangeSuccess | 路由改变后 |
| $routeUpdate | 路由刷新 |
| $routechangeError | 路由不能改变 |
三、路由配置
前面的路由都只用到了一个配置项templateUrl，这不够灵活，现在介绍其他配置项。
| 配置项 | 作用 |
| controler | 指定视图的控制器 |
| controllerAs | 指定控制器别名 |
| template | 指定视图内容 |
| templateUrl | 指定视图URL |
| resolve | 指定一组控制器的依赖 |
| redirectTo | 重定向路径 |
| reloadOnSearch | true（默认）仅当$location的search和hash方法改变返值时触发 |
| caseInsensitiveMatch | true（默认）忽略大小写 |
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>route test</title>
</head>
<body ng-controller="getCtrl">
<h1>This is fixed part</h1>
<ul>
<li><a href="./">home</a></li>
<li><a href="./#!/page1/{{1}}">page1</a></li>
<li><a href="./#!/page2/{{2}}">page2</a></li>
<li><a href="./#!/page3/{{3}}/我是一个小傻瓜/乌拉啦五">page3</a></li>
</ul>
<div>参数id为:{{id || "unknown"}}</div>
<div>参数data为:{{data || "unknown"}}</div>
<div ng-view></div>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript">
angular.module("myApp",['ngRoute'])
.factory('serv',function(){
return {
log:function(){
return "hello";
}
};
})
.config(function($routeProvider,$locationProvider){
$routeProvider
.when("/page1/:id",{
templateUrl:"./1.html"
})
.when("/page2/:id",{
templateUrl:"./2.html"
})
.when("/page3/:id/:data*",{
templateUrl:"./3.html",
controller:"page3Ctrl",
resolve:{
data:function(serv){
return serv.log();
}
}
})
.otherwise({
templateUrl:"./home.html"
});
})
.controller("getCtrl",function($location,$routeParams,$scope,$route){
$scope.show = function(){
alert("我是index里边的控制器");
}
$scope.$on("$routeChangeSuccess",function(){
if($location.path().indexOf("/page")==0){
var id = $routeParams["id"];
var data = $routeParams['data'];
$scope.id = id;
$scope.data = data;
}
})
})
.controller('page3Ctrl',function($scope,data){
$scope.show = function(){
alert("我是page3的控制器");
}
console.log(data);
})
</script>
</body>
</html>
这个例子为page3指定了一个控制器，声明了和index中控制器一样方法名的方法，发现page3调用的是自己控制器的方法。然后定义了一个服务，用resolve声明了对它的依赖，发现在page3控制器中可用。
路由就这样愉快的学完了。听说有个uiRoute模块很强大，很方便，改天学学。感觉这个ngRoute已经能解决很多问题了。
AngularJS1.X学习笔记13-路由的更多相关文章
- Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法
Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...
- SQL反模式学习笔记13 使用索引
目标:优化性能 改善性能最好的技术就是在数据库中合理地使用索引. 索引也是数据结构,它能使数据库将指定列中的某个值快速定位在相应的行. 反模式:无规划的使用索引 1.不使用索引或索引不足 2.使用了 ...
- golang学习笔记13 Golang 类型转换整理 go语言string、int、int64、float64、complex 互相转换
golang学习笔记13 Golang 类型转换整理 go语言string.int.int64.float64.complex 互相转换 #string到intint,err:=strconv.Ato ...
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定
springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定 标签: springmvc springmvc学习笔记13-springmvc注解开发之集合类型參数绑定 数组绑定 需 ...
- Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...
- 并发编程学习笔记(13)----ConcurrentLinkedQueue(非阻塞队列)和BlockingQueue(阻塞队列)原理
· 在并发编程中,我们有时候会需要使用到线程安全的队列,而在Java中如果我们需要实现队列可以有两种方式,一种是阻塞式队列.另一种是非阻塞式的队列,阻塞式队列采用锁来实现,而非阻塞式队列则是采用cas ...
- python 学习笔记 13 -- 经常使用的时间模块之time
Python 没有包括相应日期和时间的内置类型.只是提供了3个相应的模块,能够採用多种表示管理日期和时间值: * time 模块由底层C库提供与时间相关的函数.它包括一些函数用于获取时钟时间和处 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- 如何为Web应用选择托管主机
PHP应用开发好了?恭喜你!不过,现在还没什么用,因为用户无法使用.你要把应用存储到服务器中,让预期受众能访问.一般来说,存储PHP应用有四种方式:共享服务器.虚拟私有服务器.专用服务器和平台即服务. ...
- Ubuntu14.04安装pycharm用于Python开发环境部署，并且支持pycharm使用中文输入
一.目标 实现在Linux下用pycharm调试工具/Python开发 Linux使用vi/vim工具写Python,缺点:调试不方便,无代码提示.跳转等诸多功能. Windows使用idle/pyc ...
- Unity3D UGUI窗口拖拽
在开发UGUI时 我们时常需要做一个窗口拖拽的功能 先上代码 using UnityEngine; using UnityEngine.EventSystems; public class DragW ...
- html、css简述面试题
hTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超 ...
- 【重点--web前端面试题总结】
前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...
- 面试题中遇到的算法与js技巧
近一周在忙着面试,本月第一次更博,甚是想念. 基本上大公司都会要求一些算法或者数据结构类的东西,这方面自己还不是很精通,只能一步一个脚印来积累了. 1.查询字符串获取对象数据,可自行根据需求选择格式, ...
- Mycat 分片规则详解--范围分片
实现方式:切分规则根据文件(autopartition-long.txt)配置的范围来进行切片,制定基准列的取值范围,然后把这一范围的所有数据都放到一个DN上面 优点:适用于整体数量可知或总数量为固定 ...
- Java基础_Java概述
Java_概述 特点: 平台的移植性 开源 面向对象 多线程 安全性 工作方式: 先编译再解释执行. 先通过Javac命令将Java源代码编译成字节码文件(bytecode,类文件,.class,中间 ...
- 仿vue实现简易版mvvm双向绑定
项目地址:https://github.com/pangyongsheng/mvvm 1. 指令 vm-bind 单选数据绑定- 将数据显示到标签视图 vm-model : 双向数据绑定 vm-sho ...
- Sagit.Framework For IOS 开发框架入门教程5：消息弹窗STMsgBox
前言: 昨天刚写了一篇IT连创业的文章:IT连创业系列:产品设计之答题模块,(欢迎大伙关注!) 感觉好久没写IOS的文章了,今天趁机,来补一篇,Sagit的教程. Sagit 开源地址:https:/ ...