这篇文章主要简单介绍了AngularJS通过ng-route实现基本的路由功能,结合实例形式详细分析了AngularJS使用ng-route实现路由功能的操作步骤与相关实现技巧。
在讲AngularJS 的ng-route之前，先来看看我们常见的web多页应用和单页应用：
多页应用（MPA）：
一个项目有多个html完整页面，跳转是在页面与页面直接进行跳转，所有的页面请求都是同步的（客户端在等待服务器给响应的时候，浏览器中一片空白，直到响应成功才会创建完整Dom树），并且每个页面都需要加载一次css和js文件，性能较差；
单页应用（SPA）：
整个项目中只有一个完整的HTML页面，其它HTML文件都是HTML片段，称为伪页面，所有的“伪页面请求”都是异步请求（客户端在等待下一个页面片段到来时，仍可以显示前一个页面内容），整个项目的CSS和JS文件只需要加载一次，体验更好；
AngularJS提供的模块——ngRoute
Route：路由，通过某条线路找到目标内容。
ngRoute模块的用途：就是根据浏览器中URL中的一个特殊的地址标记(形如#/xxx)，查找到该标记所对应的模板页面，并异步加载到当前页面的ngView指令中。
【路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。】
使用步骤：
(1)创建唯一完整的HTML页面，其中声明一个容器，ngView指令。引入angular.js和angular-route.js(注意：这里需要先引入angular.js,主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现)；----（Index.html）
(2)创建多个模板页面(习惯上放在一个特别的目录下，如tpl)----（我在tpl目录下创建了3个页面：start.html/main.html/detail.html）
(3)创建Module，声明依赖于ng和ngRoute两个模块。
(4)在Module中配置路由字典。
代码：
Index.html
<!DOCTYPE html> <html lang="en" ng-app="myModule1"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <!--模板页面容器--> <div ng-view> </div> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> <script> // 模块依赖于ng和ngRoute angular.module('myModule1',['ng','ngRoute']).config(function ($routeProvider) { // 配置路由字典,指定路由地址和模板页面的对应关系 $routeProvider. when('/start',{ templateUrl:'tpl/start.html', controller:'startCtrl' //此处声明controller可以供templateUrl地址页面使用 }).otherwise({redirectTo:'/main'}). when('/main',{ templateUrl:'tpl/main.html' }). when('/detail',{ templateUrl:'tpl/detail.html' }) }).controller('startCtrl',function ($scope,$routeParams) { $scope.msg='起始页面'; console.log($routeParams); }).controller('mainCtrl',function ($scope) { $scope.msg='中心页面'; }).controller('detailCtrl',function ($scope) { $scope.msg='详情页面'; }); </script> </body> </html>
详解：
config():路由配置方法，config支持依赖注入，$routeProvider是针对于route配置的provider；
when()：配置路径和参数
$routeProvider.when(‘/伪页面名称’, { template: string, //页面概述 templateUrl: string, //伪页面真实的路径url controller: string, function 或 array, //控制器名称和对应的函数，这里生成的控制器可以在整个该url页面使用，不需要在该url页面重复声明 controllerAs: string, //给控制器重新取个名称 redirectTo: string, function, //重定向的地址 resolve: object<key, function> //当前控制器所依赖的其他模块});3个伪页面HTML：
start.html
<div class="panel panel-primary" > <div class="panel-heading"> <h3>start</h3> </div> <div class="panel-body"> <a href="#/main" class="btn btn-danger">地址跳转到main</a> <p>{{msg}}</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p> </div> </div>
main.html
<div class="panel panel-danger" ng-controller="mainCtrl"> <div class="panel-heading"> <h3>main</h3> </div> <div class="panel-body"> <a href="#/detail" class="btn btn-danger">地址跳转到main</a> <p>{{msg}}</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p> </div> </div>
detail.html
<div class="panel panel-info" ng-controller="detailCtrl"> <div class="panel-heading"> <h3>detail</h3> </div> <div class="panel-body"> <a href="#/start" class="btn btn-danger">地址跳转到start</a> <p>{{msg}}</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum et facere fugiat incidunt numquam qui sequi temporibus ut, voluptatum. Eaque facere hic inventore ipsam molestias neque perspiciatis placeat voluptas!</p> </div> </div>
ngRoute模块中的伪页面跳转
1、通过超链接跳转
<a href="#/路由地址"> #不能省
2、通过JS跳转
<button ng-click="jump()"></button>
$scope.jump = function(){
//location.href="2.html" 不能使用多页面应用中的跳转
$location.path('/路由地址'); //#不能有
}
效果：
以上，就是一个基础的ngRoute使用步骤，希望对你有帮助！