AngularJs ng的路由机制

最新推荐文章于 2020-12-21 05:05:24 发布

转载最新推荐文章于 2020-12-21 05:05:24 发布 · 448 阅读

本文深入探讨了AngularJS的路由机制，通过介绍单页面应用（SPA）的概念、解决浏览器后退按钮失效的方法以及AngularJS的ngRoute模块的使用方法，详细解释了如何通过地址栏进行深度链接来实现路由功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

ngRoute包括的内容

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

服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射

服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}

服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

　　以上内容再加上$location服务，我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。

使用ng的路由机制

　　第一步：引入文件和依赖

　　ngRoute模块包含在一个单独的文件中，所以第一步需要在页面上引入这个文件，如下：

　　光引入还不够，我们还需在模块声明中注入对ngRoute的依赖，如下：

var app = angular.module('MyApp', ['ngRoute']);

　　完成了这些，我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。

　　 第二步：定义路由表

　　$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 //重定向的地址

最简单情况，我们定义一个html文件为模板，并初始化一个指定的controller：

function emailRouteConfig($routeProvider){

$routeProvider.

when('/show', {

controller: ShowController,