为什么要使用框架?

提高开发效率,把繁琐的逻辑交给框架处理,把更多的精力放在数据的处理上。
当页面需要呈现的东西多了后,用户刷新页面是有等待的,为了提高用户的使用体验,我们选择了单页面开发,使用单页面就会涉及到路由的问题,要控制地址栏的变化同时响应页面的变化。

为什么使用路由

一个 url 地址对应一个网页
我们称这个 url 为路由
一个应用有部分内容都是相同的,而且页面结构也是一样的,如果我们能控制页面不同的地方就能为用户提供更好的体验,减少请求,加快响应.

ngRoute

ng router 通过检测地址栏中的 hash 变化来改变页面的内容, 不知道 hash 可以看下介绍

Install

点击下载

ngRoute 通过检测页面中的 ng-view 指令,将模版中的内容显示在到其中

Basis

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>router</title>
		<script src="angular.min.1.5.js"></script>
		<script src="angular-route.min.js"></script>
	</head>
	<body>
		<div ng-app="myApp" ng-controller="myAppCon">
			<div ng-view></div>
			<ul class="footer">
				<li><a href="#/">首页</a></li>
				<li><a href="#/classify">分类</a></li>
				<li><a href="#/user/content">个人中心</a></li>
			</ul>
		</div>
		<script>
			//依赖 ngRoute 模块
			var app = angular.module('myApp', ['ngRoute']);
			app.controller('myAppCon',['$scope',function($scope){
				$scope.globalData = "这里是全局都能使用的数据";
			}]);
			//自定义模块 (配置 路由)
			//依赖 $routeProvider 服务
			app.config(['$routeProvider', function($routeProvider){
				$routeProvider
				//当地址栏中的 hash 值与设置的相同时
					.when('/',{
						// template 中设置的内容显示到 ng-view 
						template:'<h1>首页显示的内容 : {{ text }}</h1>',
						controller : ['$scope',function($scope){
								$scope.text = "我是首页路由下的控制器内容";
						}]
					})
					.when('/classify',{
						//显示的模板数据
						template:'<h1>我是分类的内容  尝试使用全局的数据: {{ globalData }} </h1>'
					})
					.when('/user/content',{
						template:'<h1>我是个人中心</h1>'
					})
					//其它,没有匹配到路由时
					.otherwise({
						//重定向,把当前的路由指向到 /
						redirectTo:'/'
					});
			}]);
		</script>
	</body>
</html>

Examples


templateUrl

有没有注意到一个问题 : 设置路由时显示的内容都是通过 template 来设置的,假如我们要显示的内容很多,如果用现在的方式是不是很麻烦,因为都是通过字符串拼接来完成的, ng-router 提供来了另一个配置来处理这个 templateUrl
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
	$routeProvider
		.when('/',{
			//设置为返回一个静态 html 文件的地址
			templateUrl:'/html/path/xxxx.html'
		});

controller

ng-router 在处理路由的控制器时考虑到控制器需要重复利用的情况,允许设置 controller 配置时填写控制器的名字即可
var app = angular.module('myApp', ['ngRoute']);
//提前注入控制器
app.controller('viewHome',['$scope',function($scope){
	//todo
}]);
app.config(['$routeProvider', function($routeProvider){
	$routeProvider
		.when('/',{
			//设置为返回一个静态 html 文件的地址
			templateUrl:'/html/path/xxxx.html',
			//使用已经注入好的控制器,只需要以字符串的形式调用,填写控制器的名字
			controller : 'viewHome'
		});

动态路由

var app = angular.module('myApp', ['ngRoute']);
//提前注入控制器
app.controller('viewHome',['$scope',function($scope){
	//todo
}]);
app.config(['$routeProvider', function($routeProvider){
	$routeProvider
		//当路由匹配时触发
		.when('/page/:id',{
			templateUrl:'/html/path/xxxx.html',
			controller : 'viewHome'
		});

路由匹配规则

/page/1        true
/page/2        true
/page/abc      true
/page/abc/def  false
/page/         false
当访问的路由有一定规律时,设置动态路由的需求就有很大的必要性,因为路由地址是变化的,我们不能预先考虑到所有情况,但是我们可以制定路由地址变化的规则

$routeParams

获取路由地址中的参数
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
	$routeProvider
		//当路由匹配时触发
		.when('/page/:id',{
			templateUrl:'/html/path/xxxx.html',
			// 注入 routeParams 模块
			controller : ['$scope','$routeParams',function($scope,$routeParams){
				// 能获取到地址栏中所有参数
				// $routeParams 返回的是一个对象
				console.log($routeParams);
			}]
		});