AngularJS入门教程之路由机制ngRoute实例分析  更新时间:2016年12月13日 09:53:53   作者:郑浩-   这篇文章主要介绍了AngularJS入门教程之路由机制ngRoute,结合实例形式分析了AngularJS路由机制的原理、ngRoute的组成、配置、参数与相关使用技巧,需要的朋友可以参考下 本文实例讲述了AngularJS路由机制ngRoute。分享给大家供大家参考,具体如下: 引言 在我们介绍路由之前我们首先谈一下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用来在主视图中指定加载子视图的区域 路由机制的实现 第一步、引入两个依赖文件 因为路由机制上一个单独的模块,所以我们需要单独的引入路由文件,仅仅引入AngularJS.min.js是不包含路由的,引入文件以后我们还需要在模块声明中注入对ng-route的依赖: var app = angular.module(“myApp”, [‘ngRoute’]); 完成了这些,我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。 第二步:完成路由表的配置 app.config([‘$routeProvider’, function ($routeProvider) { $routeProvider .when(‘/div1’, { template: ‘这是div1{{text}}’, controller: ‘div1Controller’ }) .when(‘/div2’, { template: ‘这是div2{{text}}’, controller: ‘div2Controller’ }) .when(‘/div3’, { template: ‘这是div3{{text}}’, controller: ‘div3Controller’ }) .when(‘/content/:id’, { template: ‘这是content{{id}}’, controller: ‘div4Controller’ }) .otherwise({ redirectTo: ‘/div1’ }); }]); $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。 参数说明如下: controller //function或string类型。在当前模板上执行的controller函数,生成新的scope controllerAs //string类型,为controller指定别名 template //string或function类型,视图所用的模板,这部分内容将被ngView引用 templateUrl //string或function类型,当视图模板为单独的html文件或是使用了定义模板时使用 resolve //指定当前controller所依赖的其他模块 redirectTo //重定向的地址 第三步:在主视图模板中指定加载子视图的位置 我们的单页面程序都是局部刷新的,那这个“局部”是哪里呢,这就轮到ngView出马了,只需在模板中简单的使用此指令,在哪里用,哪里就是“局部”。 通过以上我们就完成了了一个路由的全部配置过程,在没有接触路由的时候感觉路由这一块是比价难的,但是当我们真正的了解到这一块的原理的时候并不是非常的难,路由在AngularJS中是核心部分所以我们需要牢牢的掌握这一部分。 友情推荐: 看到这可能会有人说如果有个完整的Ddeo就好了,所以说小编给大家推荐一个编写前台代码的工具RunJS并且可以实现代码的共享,小编的这个Demo就在这上面,可在此处查看效果;http://sandbox.runjs.cn/show/gj894e3t#/content/13 此处查看源码: http://runjs.cn/code/gj894e3t 这样以后我们就可以随意的分享代码,尤其是我们在讲课的时候非常的方便! 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angularjs制作简单的路由功能demo AngularJS 路由详解和简单实例 使用AngularJS对路由进行安全性处理的方法 AngularJS路由实现页面跳转实例 AngularJS 路由和模板实例及路由地址简化方法(必看) AngularJS通过ng-route实现基本的路由功能实例详解 AngularJS监听路由的变化示例代码 简单讲解AngularJS的Routing路由的定义与使用 AngularJS监听路由变化的方法 AngularJS基于ui-route实现深层路由的方法【路由嵌套】 AngularJS入门教程之路由与多视图详解 AngularJS实现单一页面内设置跳转路由的方法 AngularJS 路由 ngRoute 相关文章 简介AngularJS的视图功能应用 这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用,以及 $routeProvider 需要的朋友可以参考下 2015-06-06 ionic3实战教程之随机布局瀑布流的实现方法 这篇文章主要给大家介绍了关于ionic3实战教程之随机布局瀑布流的实现方法,文中通过示例代码和图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-12-12 Angular2 (RC5) 路由与导航详解 这篇文章主要介绍了Angular2 (RC5) 路由与导航的相关资料,需要的朋友可以参考下 2016-09-09 angularjs实现分页和搜索功能 这篇文章主要介绍了angularjs实现分页和搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-01-01 Angular6项目打包优化的实现方法 这篇文章主要给大家介绍了关于Angular6项目打包优化的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-12-12 angularjs1.5 组件内用函数向外传值的实例 今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 关于AngularJS中几种Providers的区别总结 这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-05-05 详解AngularJS中的表达式使用 这篇文章主要介绍了详解AngularJS中的表达式使用,包括处理数字和字符串等各种对象的操作,需要的朋友可以参考下 2015-06-06 ng-events类似ionic中Events的angular全局事件 这篇文章主要介绍了ng-events类似ionic中Events的angular全局事件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-09-09 angular中的post请求处理示例详解 这篇文章主要给大家介绍了关于angular中post请求处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-06-06 最新评论

本文实例讲述了AngularJS路由机制ngRoute。分享给大家供大家参考,具体如下:

引言

在我们介绍路由之前我们首先谈一下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用来在主视图中指定加载子视图的区域

路由机制的实现

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

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

因为路由机制上一个单独的模块,所以我们需要单独的引入路由文件,仅仅引入AngularJS.min.js是不包含路由的,引入文件以后我们还需要在模块声明中注入对ng-route的依赖:

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

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

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

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/div1', {
        template: '<p>这是div1{{text}}</p>',
        controller: 'div1Controller'
      })
      .when('/div2', {
        template: '<p>这是div2{{text}}</p>',
          controller: 'div2Controller'
      })
      .when('/div3', {
        template: '<p>这是div3{{text}}</p>',
        controller: 'div3Controller'
      })
      .when('/content/:id', {
        template: '<p>这是content{{id}}</p>',
        controller: 'div4Controller'
      })
      .otherwise({
        redirectTo: '/div1'
      });
}]);

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

参数说明如下:

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

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

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

通过以上我们就完成了了一个路由的全部配置过程,在没有接触路由的时候感觉路由这一块是比价难的,但是当我们真正的了解到这一块的原理的时候并不是非常的难,路由在AngularJS中是核心部分所以我们需要牢牢的掌握这一部分。

友情推荐:

看到这可能会有人说如果有个完整的Ddeo就好了,所以说小编给大家推荐一个编写前台代码的工具RunJS并且可以实现代码的共享,小编的这个Demo就在这上面,可在此处查看效果;http://sandbox.runjs.cn/show/gj894e3t#/content/13

此处查看源码:
http://runjs.cn/code/gj894e3t

这样以后我们就可以随意的分享代码,尤其是我们在讲课的时候非常的方便!

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • Angularjs制作简单的路由功能demo
  • AngularJS 路由详解和简单实例
  • 使用AngularJS对路由进行安全性处理的方法
  • AngularJS路由实现页面跳转实例
  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • AngularJS通过ng-route实现基本的路由功能实例详解
  • AngularJS监听路由的变化示例代码
  • 简单讲解AngularJS的Routing路由的定义与使用
  • AngularJS监听路由变化的方法
  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】
  • AngularJS入门教程之路由与多视图详解
  • AngularJS实现单一页面内设置跳转路由的方法
张贴在3