首页 > Javascript > AngularJS学习笔记(二)

AngularJS学习笔记(二)

五、angularjs的路由:

1.1  路由

现在开发中的视图越来越多,为了支持多个视图之间的跳转,引入了路由的概念。通过路由我们可以实现页面之间的跳转。

为什么需要路由?

因为ajax请求不会在浏览器中留下history,这对SEO(Search Engine Optimization 搜索引擎优化)是一种毁灭性打击。

1.2 传统路由

从1.2版本开始,AngularJS将ngRoutes从核心代码中剥离出来成为独立的模块。我们需要安

装并引用它,才能够在AngularJS应用中正常地使用路由功能

这行载入AngularJS脚本:

<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>

这行载入AngularJS脚本:

<script src="http://s1.phprm.com/min/f=angularjs/angular-route.js"></script>

route/demo4.html源代码

<!DOCTYPE html>
<html ng-app="my">
	<head>
		<meta charset="utf-8" />
		<title>路由</title>
		<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
		<script src="http://s1.phprm.com/min/f=angularjs/angular-route.js"></script>
		<script src="../js/demo4.js"></script>
	</head>

	<body>
		<div ng-view>

		</div>
	</body>

</html>

在route目录下创建4个html文件。

route/a.html源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			aaaaaaaaaaaaaaaaaa<br>
			<a href="#/">list.jsp</a>
	</body>
</html>

route/b.html源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			bbbbbbbbbbbbb
	</body>
</html>

route/c.html源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			cccccccccccc
	</body>
</html>

route/list.html源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<a href="#/a">a.html</a><br>
			<a href="#/b">b.html</a><br>
			<a href="#/c">c.html</a><br>
			<!--href值不在是 xxx.html路径,它需要指定的是angularJS中路由规定的url-->
	</body>
</html>

访问/angularjs/route/demo4.html将会自动跳转到/angularjs/route/demo4.html#/

所有的链接访问都会改变浏览器地址栏的url。

1.3 高级路由

AngularJS社区还构建了很多可以用来最大限度地提升应用能力的

优秀的库.我们介绍AngularUI库所提供的最有用的库之一便是ui-router。它是一个路由框架,允许你通过状态机

组织接口,而不是简单的URL路由。

在使用ui-router我们要确保导入angular-ui-router.js(注意,这个文件我们要单独下载)

同时还需要将ui.router作为依赖注入到你的应用中:

angular.module('myApp', ['ui.router']);

在处理ngRoute服务时我们不再使用ng-view,而改为使用ui-view指令。

相比传统路由的优点:

  1. 支持多层嵌套

  2. 传统路由是基于url,而高级路由基于status(状态)





本文链接:http://blog.zhengshuiguang.com/js/angularjs-2.html

收藏随意^^请保留教程地址.

标签:angularjs

相关文章

评论已关闭