本文通过实例描述了AngularJS路由机制ngRoute。分享给大家参考，如下：

序

在介绍路由之前，我们先来说说SPA，所以SPA就是我们常说的单页应用。为了实现视图切换而不刷新，我们之前的做法是使用AJAX从后面取出数据，在前台页面的HTML中进行渲染。然而，AJAX有一个致命的缺点，它不能禁用浏览器的后退按钮。为了解决这个问题，我们通常使用hash来监控hashchange事件以切换视图。另一种方法是通过pushState()记录操作历史，并监控popstate事件以切换视图。有人称之为pjax技术。基本流程如下：

这样就形成了通过地址栏导航的深度链接，这就是我们需要的路由机制。通过路由机制，可以很好地组织单页应用程序的视图。

天然气路线的内容

Ng的路由机制由ngRoute提供，通过哈希和历史来实现路由，可以检测浏览器是否支持历史来灵活调用对应的方式。Ng route是一个单独的模块，包括以下内容：

service $ routeProvider用于定义路由表，即地址栏和视图模板之间的映射

Service $ routepams将参数保存在地址栏中，例如{id : 1，name : 'tom'}

service $location用于获取当前url和更改当前url，并将其存储在历史记录中

Service $route完成路由匹配，并提供与路由相关的属性访问和事件，例如访问对应于当前路由的控制器

ngView指令用于指定在主视图中加载小程序的区域

路由机制的实现

第一步是引入两个相关文件

script src=' http :3358 apps . bdimg.com/libs/Angular . js/1 . 4 . 6/Angular . min . js '/script script src=' http :3358 cdn . bootcss.com/Angular . js/1 . 2 . 9/Angular-route . min . js '/script由于路由机制是一个单独的模块，我们需要单独导入路由文件。仅介绍AngularJS.min.js不包括路由。引入文件后，我们需要将对ng-route的依赖注入到模块声明中：

var app=angular.module('myApp '，[' ngRoute '])；之后，我们可以在模板或控制器中使用上述服务和说明。接下来我们需要定义一个路由表。

步骤2:完成路由表的配置

App.config (['$ routeprovider '，function($ route provider){ $ route provider . when('/div 1 '，{template :' p这是div1{{text}}/p '，controller : ' div 1 controller ' })。当('/div2 '，{ template3360这是div2 {{text}}/p '，controller : ' div 2 controller ' })时。当('/div3 '，{template3360' p这是div3 {{text}}/p '，controller : ' div 3 controller ' })时。当('/content/: id '，{template3360' p这是内容{{id}}/p '，controller : ' div4 controller ' })时。否则({ redirectto : '/div 1 ' })；}]);$routeProvider提供定义路由表的服务。它有两个核心方法，时间(路径，路由)和其他(参数)。我们先来看核心的当(path，route)方法在核心。

when(路径，路由)方法接收两个参数。Path是一个字符串类型，指示路由规则匹配的路径，它将与地址栏的content ($location.path)值匹配。如果需要匹配参数，可以在path中使用冒号加名称，例如path为/show/:name，如果地址栏为/show/tom，那么参数名称和对应的值tom将保存在$ routepams中，如下所示：

{姓名： tom} .我们也可以使用*进行模糊匹配，例如，/show*/:name将匹配/showInfo/tom。

参数描述如下：

键入控制器//函数或字符串。在当前模板上执行的控制器函数生成新的scopecontrollerAs//字符串类型，为控制器指定别名模板//字符串或函数类型，以及用于视图的模板。ngView将把这部分内容作为TemplateURl//字符串或函数类型引用。当视图模板是单独的html文件或脚本类型='text/ng-template '用于定义模板时，使用resolve //指定当前控制器所依赖的其他模块的重定向地址。步骤3:在主视图模板中指定加载子视图的位置。

我们的单页程序都是本地刷新的，那么这个“本地”在哪里呢？轮到ngView了。只需在模板中使用该指令，使用它的地方就是“本地”。

通过以上，我们完成了一条路由的整个配置过程。当没有联系路线的时候，我们觉得比较价格很难，但是当我们真正了解这个区块的原理的时候，就不是很难了。路由是AngularJS中的核心部分，所以我们需要牢牢抓住这一部分。

友好推荐：

看到这一点，有些人可能会说，如果有一个完整的Ddeo，那就好了，所以边肖推荐了一个编写前台代码RunJS的工具，可以共享代码。边肖的这个演示在上面，可以在这里看到。效果；http://sandbox.runjs.cn/show/gj894e3t#/content/13

查看这里的源代码：http://runjs.cn/code/gj894e3t

这样，我们可以随意分享代码，尤其是在讲课的时候。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。