首页 > 代码库 > Angular JS 学习之路由
Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容；通过AngularJS可以实现多视图的单页WEB访问（SPA）
2.通常我们的URL形式为http://runoob.com/first/page，但在单页Web应用中AngularJS通过#+标记实现，例如：
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
3.当我们点击以上的任意的一个链接时，向服务端请的地址都是一样的（http://runoob.com/）。因为#号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现#号后面内容的功能实现。AngularJS路由就通过#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
4.简单实例：
<html>
<head>
<meta charset="utf-8">
<title>AngularJS路由实例<title>
</head>
<body ng-app=‘routingDemoApp‘>
<h2>AnuglarJS路由应用</h2>
<ul>
<li><a href="http://www.mamicode.com/#/">首页</a></li>
<li><a href="http://www.mamicode.com/#/computers">电脑</a></li>
<li><a href="http://www.mamicode.com/#/printers">打印机</a></li>
<li><a href="http://www.mamicode.com/#/blabla">其他</a></li>
</ul>
<div ng-view></div> //使用ngView指令，该<div>内的HTML内容会根据路由的变化而变化
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> //载入了实现路由的js文件：angular-route.js
<script>
angular.module(‘routingDemoApp‘,[‘ngRoute‘]) //包含了ngRoute模块作为主应用模块的依赖模块
.config([‘$routeProvider‘,function($routeProvider{ //AngularJS模块的config函数用于配置路由规则，通过使用configAPI，我们请求把$routeProvider注入到我们的配置函数且使用$routeProviderAPI定义我们的路由规则
$routeProvider; //配置$routeProvider,AngularJS的$routeProvider用了定义路由规则
.when(‘/‘,{template:‘这是首页页面‘}) //$routeProvider为我们提供了when(path，object)&otherwise(object)函数按顺序定义所有路由，函数包含两个参数：第一个参数是URL或者URL正则规则；第二个参数是路由配置对象
.when(‘/computers‘,{template:‘这是电脑分类页面‘})
.when(‘/printers‘,{template:‘这是打印机页面‘})
})]);
</script>
</body>
</html>
5.路由设置对象：AngularJS路由也可以通过不同的模板来实现，$routeProvider.when函数的第一个参数是URL或者URL正则规则，第二个参数为路由配置对象；语法规则如下：
$routeProvider.when(url,{
template:string, //如果我们只需要在ng-view中插入简单的HTML内容，则使用该参数.when(‘/computers‘,{template:‘这是电脑分类页面‘})
templateUrl:string, //如果我们只需要在ng-view中插入HTML模板文件，则使用该参数：$routeProvider.when(‘/computers‘,{templateUrl:‘views/computers.html‘,});从服务器端获取view/computers.html文件插入到ng-view中
controller:string,function或array, //function，string，或数组类型，在当前模板上执行的controller函数，生成新的scope
controllerAs:string, //string，为controller指定别名
redirectTo:string,function, //重定向的地址
resolve:object<key,function> //指定当前controller所依赖的其他模块
});
Angular JS 学习之路由