AngularJs路由机制

来源：互联网发布：js鼠标悬停图片放大编辑：程序博客网时间：2024/05/17 01:46

概述

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

路由机制

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

如此一来，便形成了通过地址栏进行导航的深度链接（ 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><!--[if lt IE 9]><script>(function(){    var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter','output','progress','time','video','audio','canvas','dialog'];    for(var i=tags.length - 1;i>-1;i--){ document.createElement(tags[i]);}})();</script><![endif]--><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><!-- <section ui-view></section> --></main><footer class="col-md-12">Copyright &copy; 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;
点击打开链接

1 0