媲美jQuery的JS框架：AngularJS（2）(6)_H5之家 - 中国HTML5教程资源分享第一站

路由算是AngularJS中最重要的功能之一，毕竟在前端网站中路由的应用十灰的常见：AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

一、在AngularJS中使用路由：

1. 导入路由文件：angular-route.js

2. 在主模块中注入"ngRoute"。

angular.module("app",["ngRoute"])

3. 将超链接改写为路由格式。 --> "#/标记"

<a href="#/">首页</a> //首页直接使用 #/ 表示 <a href="#/page1">page1</a> //其他页面"#/标记" 表示

4. 在页面的合适位置，添加ng-view，用于承载路由打开的页面：

该 div 内的 HTML 内容会根据路由的变化而变化。

5. 在config配置阶段，注入$routeProvider，进行路由配置：

.config(function($routeProvider){ $routeProvider .when("/",{template:'<h1 style="color:red;">这是首页</h1>'}) .when("/page1",{templateUrl:"page.html",controller:"ctrl1"}) .when("/page2",{templateUrl:"page.html",controller:function($scope){ $scope.text = "这是ctrl不知道是几控制器！！" }}) .when("/page3",{templateUrl:"page.html"}) .when("/page4",{}) .otherwise({redirectTo:"/"}) })

二、AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

1 $routeProvider.when(url,{ 2 template:string, //在ng-view中插入简单的html内容 3 templateUrl:string, //在ng-view中插入html模版文件 4 controller:string,function / array, //在当前模版上执行的controller函数 5 controllerAs:string, //为controller指定别名 6 redirectTo:string,function, //重定向的地址 7 resolve:object<key,function> //指定当前controller所依赖的其他模块 8 });

三、路由对象中接受的可选参数：

① template：自定义HTML模板，会直接将这段HTML记载到ng-view中；

.when("/page3",{templateUrl:"page.html"})

② templateUrl：导入外部的HTML模板文件。为了避免冲突，外部的HTML应该是一个代码片段，即只保留body以内的部分。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})

③ controller：在当前HTML模板上，执行的controller函数。会生出新的作用域$scope. 可以接受字符串(声明好的controller名字),也可以直接接受函数。

.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})

注意：使用ng-view打开的页面，controller中的作用域是属于当前页面作用域的子作用域！！依然符合Angular中父子作用域"能读不能写"的要求！

所以：如果需要在ng-view中修改当前作用域的变量，必须把这个变量声明为对象的属性！！

④ redirectTo：重定向。一般用于.otherwise()中，用于重定向回首页！

.otherwise({redirectTo:"/"})

最后举个栗子：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ overflow: hidden; } li{ width: 100px; height: 40px; text-align: center; float: left; line-height: 40px; list-style: none; cursor: pointer; } li a{ text-decoration: none; color: black; } li:hover{ background-color: yellow; } #div1{ width: 1000px; height: 500px; margin: 20px auto; border: 2px solid red; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/page1">page1</a></li> <li><a href="#/page2">page2</a></li> <li><a href="#/page3">page3</a></li> <li><a href="#/page4">page4</a></li> </ul> <input type="text" ng-model="test" /> <input type="text" ng-model="obj.test" /> <div id="div1" ng-view> </div> </body> <script src="js/angular.js" type="text/javascript"></script> <script src="js/angular-route.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("app",["ngRoute"]) .config(function($routeProvider){ $routeProvider .when("/",{template:'<h1 style="color:red;">这是首页</h1>'}) .when("/page1",{templateUrl:"page.html",controller:"ctrl1"}) .when("/page2",{templateUrl:"page.html",controller:function($scope){ $scope.text = "这是ctrl不知道是几控制器！！" }}) .when("/page3",{templateUrl:"page.html"}) .when("/page4",{}) .otherwise({redirectTo:"/"}) }) .controller("ctrl",function($scope){ $scope.test = "这是一段测试文字！"; $scope.obj = { test:"这是一个测试对象！" } }) .controller("ctrl1",function($scope){ $scope.text = "这是ctrl1控制器！"; }) </script> </html>

结果：

作者编