AngularJs ng-route路由详解

这篇文章主要简单介绍了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跳转

$scope.jump = function(){

//location.href="2.html" 不能使用多页面应用中的跳转

$location.path('/路由地址'); //#不能有

}

效果：

以上，就是一个基础的ngRoute使用步骤，希望对你有帮助！