angularJS学习小结——ngRoute(路由机制)

原创 2016年04月25日 18:39:26


   引言


   在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现


无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺


点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切


换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也


有人把这叫pjax技术。基本流程如下:


   



   如此一来,便形成了通过地址栏进行导航的深度链接(deeplinking ),也就是我们所需要的路由机制。通过


路由机制,一个单页应用的各个视图就可以很好的组织起来了。


   ng-route包含的内容


   ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history


来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块,包含以下内容:


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


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


   •服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录


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


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


   路由机制的实现


   第一步、引入两个依赖文件

[csharp] view plain copy
 print?
  1. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  
  2.   
  3. <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>  


   因为路由机制上一个单独的模块,所以我们需要单独的引入路由文件,仅仅引入AngularJS.min.js是不包含路


由的,引入文件以后我们还需要在模块声明中注入对ng-route的依赖:

   

[csharp] view plain copy
 print?
  1. var app = angular.module("myApp", ['ngRoute']);  

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


   第二步:完成路由表的配置

   

[csharp] view plain copy
 print?
  1. app.config(['$routeProvider', function ($routeProvider) {  
  2.        $routeProvider  
  3.            .when('/div1', {  
  4.                template: '<p>这是div1{{text}}</p>',  
  5.                controller: 'div1Controller'  
  6.            })  
  7.            .when('/div2', {  
  8.                template: '<p>这是div2{{text}}</p>',  
  9.                    controller: 'div2Controller'  
  10.            })  
  11.             .when('/div3', {  
  12.                 template: '<p>这是div3{{text}}</p>',  
  13.                 controller: 'div3Controller'  
  14.             })  
  15.          .when('/content/:id', {  
  16.              template: '<p>这是content{{id}}</p>',  
  17.              controller: 'div4Controller'  
  18.          })  
  19.            .otherwise({  
  20.                redirectTo: '/div1'  
  21.   
  22.            });  
  23.    }]);  

   $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。


   参数说明如下:

   

[csharp] view plain copy
 print?
  1. controller //function或string类型。在当前模板上执行的controller函数,生成新的scope  
  2. controllerAs //string类型,为controller指定别名  
  3. template //string或function类型,视图所用的模板,这部分内容将被ngView引用  
  4. templateUrl //string或function类型,当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用  
  5. resolve //指定当前controller所依赖的其他模块  
  6. redirectTo //重定向的地址  


      第三步:在主视图模板中指定加载子视图的位置


   我们的单页面程序都是局部刷新的,那这个“局部”是哪里呢,这就轮到ngView出马了,只需在模板中简单的


使用此指令,在哪里用,哪里就是“局部”。


   通过以上我们就完成了了一个路由的全部配置过程,在没有接触路由的时候感觉路由这一块是比价难的,但是


当我们真正的了解到这一块的原理的时候并不是非常的难,路由在angularJS中是核心部分所以我们需要牢牢的掌握


这一部分。


   友情推荐:


   看到这可能会有人说如果有个完整的Ddeo就好了,所以说小编给大家推荐一个编写前台代码的工具RunJS并且可


以实现代码的共享,小编的这个Demo就在这上面,请点击我查看效果点击我查看源码,这样以后我们就可以随意的


分享代码,尤其是我们在讲课的时候非常的方便!


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJs路由:ngRoute

AngularJs是单页面应用框架,因此如何从一个视图跳转到另外一个视图是至关重要的。随着应用的扩大,我们希望有专门的视图管理功能。AngularJs有专门的路由模块ngRoute来提供视图的切换,将...

angular的路由实现,ngRoute

你学习一个新的框架都会有一个理由,我学习angular的理由就是因为angular的路由功能,只能说,开发angular的大神太溜了~~~ 下面,开始介绍我对ngRoute的使用心得 ngRoute不...

AngularJS路由实例(uiRoute、ngRoute)

AngularJS的路由功能使得它能够在一个页面中呈现不同的视图页面。它的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图。AngularJS 为我们封装好了一个路由工具...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

AngularJS 路由

1.简介AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能。2.AngularJ...

angularJs-route路由详解

本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现。 ng-view的实现原理,是根据路由的切换,动态编译html模板—...

AngularJS的内置服务与路由

AngularJS中提供了很多的内置服务,通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了。 通过依赖注入的方式在组件、控制器、自定义指令、run()函数等等中使用。常见的内置服务: (...

AngularJS 路由以及模块配置

AngularJS 路由-参数,模块配置,布局模板 body { padding: 0; margin: 0; background-color: #F7F7F7; f...

AngularJS进阶(二)AngularJS路由问题解决

AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain...

AngularJS路由及基本原理解析

内容介绍,为什么要使用前端路由? UI-Router深层次嵌套路由 前端路由基本原理...
  • xyphf
  • xyphf
  • 2017年03月28日 23:08
  • 5152
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularJS学习小结——ngRoute(路由机制)
举报原因:
原因补充:

(最多只允许输入30个字)