这篇文章主要简单介绍了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
Title
详解：
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
start
地址跳转到main{
{msg}}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!
main.html
main
地址跳转到main{
{msg}}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!
detail.html
detail
地址跳转到start{
{msg}}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!
ngRoute模块中的伪页面跳转
1、通过超链接跳转
<a href="#/路由地址"> #不能省
2、通过JS跳转
<button ng-click="jump()"></button>
$scope.jump = function(){
//location.href="2.html" 不能使用多页面应用中的跳转
$location.path('/路由地址'); //#不能有
}
效果：
以上，就是一个基础的ngRoute使用步骤，希望对你有帮助！