AngularJs路由机制

心已赠人 2022-08-20 04:25 259阅读 0赞

## 概述 ##

最近项目要用到Angularjs路由机制，所以打算学一学，了解一下路由机制。在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page APP（SPA）。单页面应用（SPA）是旨在对Web应用发动革命的软件运动中可信度很高的一种。此类应用有望进行更加模块化的开发，令应用更加容易地适配与多个设备，并拥有更好的应用生命周期管理—这些几乎是软件架构师希望的全部。

**路由机制**

为了实现无刷新的视图切换，我们通常会用ajax请求从后台取数据，然后套上HTML模板渲染在页面上，然而ajax的一个致命缺点就是导致浏览器后退按钮失效，尽管我们可以在页面上放一个大大的返回按钮，让用户点击返回来导航，但总是无法避免用户习惯性的点后退。解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。基本流程如下：

![Center][]

如此一来，便形成了通过地址栏进行导航的深度链接（ deeplinking  ），也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。

## 简单应用 ##

我们打算创建一个简单的应用，涉及主页，关于和联系我们页面。虽然Angular是为创建比这更复杂的应用而生的，但是本教程展示了许多我们在大型项目中需要的概念。

### 目标 ###

*  单页应用
 *  无刷新式页面变化
 *  每个页面包含不同数据

虽然使用Javascript和Ajax可以实现上述功能，但是在我们的应用中，Angular可以使我们处理更容易。

### 层次结构 ###

*  view 用来存放HTML静态页面
 *  JS- controllers 自己定义JS
 *  components 里面用来存放公用J是  
    
 *  css 存放css样式

## ngRoute包括的内容 ##

ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块，包含以下内容：

*  服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
 *  服务$routeParams保存了地址栏中的参数，例如\{id : 1, name : 'tom'\}
 *  服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
 *  指令ngView用来在主视图中指定加载子视图的区域以上内容再加上$location服务，我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。
 *  **开发步骤：**
 *  **1.创建一个index.html用来做我们的主页面，里面可能会引入我们所需要的js和css;**
 *      <!doctype html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>Document</title>
        	
        	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
        	<link rel="stylesheet" type="text/css" href="css/main.css">
        </head>
        <body class="container">
        	<header class="col-md-12">
        		<h1>图书管理系统Demo</h1>
        	</header>
        	<main class="col-md-12">
        		<nav class="col-md-2">
        			<ul>
        				<li><a href="#/">首页</a></li>
        				<li><a href="#/second">图书列表</a></li>
        				<li><a href="#/third">学生列表</a></li>
        			</ul>
        		</nav>
        		<section class="col-md-10" ng-app="odyapp" ng-view></section>
        		
        
        	</main>
        	<footer class="col-md-12">
        		Copyright © 2015-2016 All Rights Reserved
        	</footer>
        	<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
        	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
        	<script type="text/javascript" src="bower_components/angular/angular.js"></script>
        	<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
        	<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
        	<script type="text/javascript" src="js/app.js"></script>
        	<script type="text/javascript" src="js/filters/filter.js"></script>
        	<script type="text/javascript" src="js/directives/directive.js"></script>
        	<script type="text/javascript" src="js/services/service.js"></script>
        	<script type="text/javascript" src="js/controllers/index.js"></script>
        	<script type="text/javascript" src="js/controllers/second.js"></script>
        	<script type="text/javascript" src="js/controllers/third.js"></script>
        </body>
        </html>
    
    上面的JS是我们所需要的Js,下面的Js可以暂时忽略，以后会用到；
 *  **2.创建模型和控制器**
 *  先需在模块声明中注入对ngRoute的依赖，如下：
    
        var odyapp=angular.module("odyapp",[
        	"ngRoute",
        	])
    
    $routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。
    
    when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容( $location.path) 值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参 数name和所对应的值tom便会被保存在$routeParams中，像这样：\{name : tom\}。我们也可以用\*进行模糊匹配，如：/show\*/:name将匹配/showInfo/tom。
    
    route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：
 *      controller //function或string类型。在当前模板上执行的controller函数，生成新的scope
            controllerAs //string类型，为controller指定别名
            template //string或function类型，视图所用的模板，这部分内容将被ngView引用
            templateUrl //string或function类型，当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
            resolve //指定当前controller所依赖的其他模块
            redirectTo //重定向的地址
    
    最简单的原生态路由
 *      var odyapp=angular.module("odyapp",[
        	"ngRoute",
        	"odyapp.controller",
        	"odyapp.filter",
        	"odyapp.directive",
        	"odyapp.service"
        	])
        //使用原生路由
        odyapp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
        	'use strict';
        	$routeProvider
        	// .when("/",template="<div></div>")
        	.when("/",{templateUrl:"view/index.html",controller:"indexCtrl"})
        	.when("/second",{templateUrl:"view/second.html",controller:"secondCtrl"})
        	.when("/third",{templateUrl:"view/third.html",controller:"thirdCtrl"})
        	.otherwise({redirectTo:"/"});
        }]);
    
    这里的controller，表示的是一个控制器，我们会在里面写一些Js方法用来控制流程跳转。filter是用来过滤一些数据的，我们可以在里面控制哪些数据显示，哪些数据不显示，以及数据显示的内容，directive里面可以用来写一些非angularJs的一些Js,比如jquery或者原生态js。service里面可以用来处理我们的业务逻辑。虽然有些东西没有用到，但是如果是一个完整的项目的话，这些都是必须的。
 *  **3.主视图模板中指定加载子视图的位置**
 *  我们的单页面程序都是局部刷新的，那这个“局部”是哪里呢，这就轮到ngView出马了，只需在模板中简单的使用此指令，在哪里用，哪里就是“局部”。例如：
    
        <div ng-view></div>
    
        <ng-view></ng-view>
    
    我们的子视图将会在此处被引入进来。完成这三步后，你的程序的路由就配置好了。
 *  其实我们的路由里面已经明确的指定View，在子页面里面也可以不适用ngView去绑定，只需要把子页面交给ng-controller就好了。下面为一个小
 *  Demo;
 *  [点击打开链接][Link 1]

[Center]: /images/20220731/b8150eed5b1b48b8b82a1aa90b959292.png
[Link 1]: http://download.csdn.net/download/liaodehong/9423841