AngularJS（九）：路由
本文也同步发表在我的公众号“我的天空”
AngularJS路由
AngularJS路由可以让我们通过不同的URL访问不同页面（似乎是废话），其价值主要体现在单页面的web应用中（single
page web
application，SPA），在移动端的web开发中，几乎都是SPA的形式。我们先通过一个简单的示例来了解AngularJS路由，随后再做进一步的学习。请看示例：
<html>
<head>
<title>AngularJS_23</title>
<script src="Angular.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body ng-app="myApp">
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/sport">体育</a></li>
</ul>
<div ng-view></div>
</body>
<script>
var app=angular.module("myApp",['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{template:'这是首页'})
.when('/news',{template:'这是新闻页面'})
.when('/sport',{template:'这是体育页面'})
.otherwise({redirectTo:'/'});
});
</script>
</html>
示例代码AngularJS_23.html
运行该页面，当点击不同的链接时在DIV中显示不同的内容。分析以上代码，看看我们新增加了哪些部分：
首先，AngularJS路由功能的实现是在anguler-route中实现的，所以我们引入了angular-route.min.js。其次我们观察a标签里的href地址格式，其均是由#开头的，AngularJS中URL的形式是通过“#+标记”来实现的。随后在显示内容的DIV中，我们使用了ng-view指令，该DIV可以看成一个容纳页面的容器。另外在控制器代码中由于要引入外部模块，所以我们在模块app的声明中引入了“ngRoute”。
接下来便是实现路由的关键代码app.config()，AngularJS通过config函数来配置路由，我们将$routeProvider引入到配置函数config()，并通过$routeProvider的when()或otherwise()函数来定义我们的路由规则，函数包含两个参数，第一个是URL或URL正则，第二个为路由配置对象，由于本例中只是简单的显示些文字，因此直接设置template就可以了。otherwise()函数定义所有未在when()中配置路由的其他url的路由规则，本例中直接设置redirctTo参数。
接下里我们学习路由配置对象，由于上一例中我们只是简单的演示路由，因此路由配置对象设置的比较简单，完整的路由配置对象格式为：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
各参数说明：
template：如果我们只需要在ng-view中显示简单的html内容，就使用该参数，如上一例所示。
templateUrl：如果需要在ng-view中显示页面，则该参数为页面的url。
controller：在当前模板上执行的controller函数。
controllerAs：controller函数的别名。
redirectTo：重定向的地址，如上一列中的otherwise()函数所示。
resolve：指定当前controller所依赖的其他模块。
接下里我们演示一个更复杂的示例，我们先准备两个子页面：
<h1>这是新闻页面</h1>
<ul><li ng-repeat="new in news">{{new}}</li></ul>
示例代码route_news.html
<h1>这是体育页面</h1>
<ul><li ng-repeat="sport in sports">{{sport}}</li></ul>
示例代码route_sport.html
由于子页面是嵌套在主页面的ng-view中，所以只需要DOM元素就可以了，这两个页面都很简单，使用ng-repeat来展示相应数组的内容，这个是我们之前已经掌握的知识点了。
接下来是主页面：
<body ng-app="myApp">
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/sport">体育</a></li>
</ul>
<div ng-view></div>
</body>
<script>
var app=angular.module("myApp",['ngRoute']);
app.controller("ctr_news",function($scope){
$scope.news=['新闻一','新闻二'];
})
.controller("ctr_sport",function($scope){
$scope.sports=['体育内容一','体育内容二'];
})
.config(function($routeProvider){
$routeProvider
.when('/',{
template:'这是首页'
})
.when('/news',{
templateUrl:'route_news.html',
controller:'ctr_news'
})
.when('/sport',{
templateUrl:'route_sport.html',
controller:'ctr_sport'
})
.otherwise({redirectTo:'/'});
});
</script>
示例代码AngularJS_24.html
主页面的html部分与之前的示例完全一样，我们主要看控制器代码中。首先在config()函数中，我们在“新闻页面”与“体育页面”的路由配置中，使用了templateUrl来加载子页面，同时用controller来设置了其相应的控制器，新闻页面的控制器名为“ctr_news”，这样我们就可以在主页面中通过控制器“ctr_news”来访问并设置新闻页面的DOM了，在这里我们是初始化了一个数组“news”,这样在子页面中就可以使用该数组，并渲染新闻页面里的li元素，同时体育页面的处理也完全一样。
app.controller("ctr_news",function($scope){
$scope.news=['新闻一','新闻二'];
})
当然，我们也可以不对子页面设置单独的控制器，而是统一由主页面的控制器处理，不过这样不利于整体代码的架构，不建议这样写。
<body ng-app="myApp" ng-controller="ctr">
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/sport">体育</a></li>
</ul>
<div ng-view></div>
</body>
<script>
var app=angular.module("myApp",['ngRoute']);
app.controller("ctr",function($scope){
//所有的数据在主页面的控制器中来处理
$scope.news=['新闻一','新闻二'];
$scope.sports=['体育内容一','体育内容二'];
})
.config(function($routeProvider){
$routeProvider
.when('/',{
template:'这是首页'
})
.when('/news',{
templateUrl:'route_news.html'
})
.when('/sport',{
templateUrl:'route_sport.html'
})
.otherwise({redirectTo:'/'});
});
</script>
示例代码AngularJS_25.html
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS（九）：路由的更多相关文章
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
- CCNP路由实验之九 路由策略
CCNP路由实验之九 路由策略 路由器在公布与接收路由信息时,可能须要实施一些策略.以便对路由信息进行过滤,比如仅仅接收或公布满足一定条件的路由信息. 一种路由协议可能须要引入其它的路由协议发现 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- AngularJS(16)-路由
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- angularJS的路由！
angularJS 路由:(分发需求) angularJS 中路由是单独提供的功能模块,ngRoute 也是一个单独发行的文件 可以通过 npm 去安装这个包:angular-route <s ...
随机推荐
- [51nod1116]K进制下的大数
解题关键:$A\% (k - 1) = (A[0] + A[1]*k + A[2]*{k^2} + ...A[n]*{k^n})\% (k - 1) = (A[0] + A[1] + ...A[n]) ...
- 初始String
--------------siwuxie095 使用频繁操作繁琐的数据有哪些? 对于基本数据类型:int.ch ...
- 由hibernate配置inverse="true"而导致的软件错误，并分析解决此问题的过程
题目背景软件是用来做安装部署的工具,在部署一套系统时会有很多安装包,通过此工具,可以生成一个xml文件用以保存每个安装包的文件位置.顺序.参数.所需脚本.依赖条件验证(OS..net.IIS.数据版本 ...
- layui table中使用checkbox
第一步: 1. <div class="layui-form"> <table class="layui-hide" lay-filter=& ...
- IQA(图像质量评估)
图像质量评价(Image Quality Assessment,IQA)是图像处理中的基本技术之一,主要通过对图像进行特性分析研究,然后评估出图像优劣(图像失真程度). 主要的目的是使用合适的评价指标 ...
- 3、jquery_动态创建元素
动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于 $($( ...
- Spark 官网提到的几点调优
1. 数据序列化 默认使用的是Java自带的序列化机制.优点是可以处理所有实现了java.io.Serializable 的类.但是Java 序列化比较慢. 可以使用Kryo序列化机制,通常比Java ...
- [Xcode 实际操作]四、常用控件-(12)环形进度条控件的使用
目录:[Swift]Xcode实际操作 本文将演示环形进度条控件的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vi ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- 浅析HTTP协议get请求与post请求
一.HTTP简介 1. HTTP协议:(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则(报文格式). 2.报文: ...