关闭

[置顶] angularJS学习小结——ngRoute(路由机制)

标签: angularJSng-route
10902人阅读 评论(35) 收藏 举报
分类:


   引言


   在我们介绍路由之前我们首先谈一下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就在这上面,请点击我查看效果点击我查看源码,这样以后我们就可以随意的


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


6
0
查看评论

AngularJs路由:ngRoute

AngularJs是单页面应用框架,因此如何从一个视图跳转到另外一个视图是至关重要的。随着应用的扩大,我们希望有专门的视图管理功能。AngularJs有专门的路由模块ngRoute来提供视图的切换,将路由、视图和控制器很好的对应了起来。 简单的说,ngRoute模块中的$route服务会监...
  • GAMEloft9
  • GAMEloft9
  • 2016-03-23 16:54
  • 876

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比。 ngRoute 使用方法 1) 引入 angu...
  • pursuer211
  • pursuer211
  • 2017-03-06 15:21
  • 775

AngularJS 路由:ng-route 与 ui-router

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使...
  • yangjvn
  • yangjvn
  • 2015-08-16 17:34
  • 26917

AngularJS路由及基本原理解析

内容介绍,为什么要使用前端路由? UI-Router深层次嵌套路由 前端路由基本原理
  • xyphf
  • xyphf
  • 2017-03-28 23:08
  • 7219

AngularJs路由机制

最近项目要用到Angularjs路由机制,所以打算学一学,了解一下路由机制。
  • liaodehong
  • liaodehong
  • 2016-01-31 17:03
  • 2542

AngularJS 路由

1.简介AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能。2.AngularJS中的url在单页WEB应用的url中添加了#号,#号代表着网页的一个位置 ,其右边的所有内容,就是...
  • qq_20448859
  • qq_20448859
  • 2016-07-22 14:19
  • 2452

angularJs-route路由详解

本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现。 ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。 更多内容参考:Angularjs总结 前提 ...
  • bing_JavaScript
  • bing_JavaScript
  • 2016-05-05 14:42
  • 10496

AngularJS实际项目应用——模块路由

本项目利用了ui-router-extras库的特性,实现了路由的动态加载,即对路由按照模块进行切割,只有用户真正访问某个模块下的页面时,才会去加载对应的模块文件,配置路由。设想一下如果项目有几十个路由甚至更多,用ui-router的方式在app启动时候用config方法去配置,会显得臃肿低效率。如...
  • kittyjie
  • kittyjie
  • 2017-02-14 15:49
  • 1445

angular.js 路由及页面传参

(1)自带路由ngRoute AngularJS 路由实例 AngularJS 路由应用 名: 首页1 second ...
  • u013378306
  • u013378306
  • 2016-11-03 14:57
  • 14523

angularjs路由跳转页面后刷新报404错误

服务器环境: nginxangularjs自带路由功能,当通过路由跳转的新页面时,由于目录下并不存在该页面对应的静态文件,所以此时执行刷新页面,会报404的错误。进一步讲,原因是在刷新请求页面时,nginx 等服务器会先于angularjs接管页面跳转,由于nginx并没有 angularjs里的路...
  • feiniao8651
  • feiniao8651
  • 2017-06-07 12:21
  • 1734
    个人资料
    • 访问:566956次
    • 积分:18515
    • 等级:
    • 排名:第598名
    • 原创:275篇
    • 转载:20篇
    • 译文:0篇
    • 评论:5683条
    和我交谈
    点击这里给我发消息 点击这里给我发消息
    时间你好?
    博客专栏
    最新评论