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

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

引言


在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把这叫pjax技术。基本流程如下:


20160424154310400.png


如此一来,便形成了通过地址栏进行导航的深度链接(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"><

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

[csharp]  view plain  copy  
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就在这上面,请点击我查看效果;点击我查看源码,这样以后我们就可以随意的分享代码,尤其是我们在讲课的时候非常的方便!

目录
相关文章
|
JSON 算法 Go
Golang语言使用 jwt-go 库生成和解析 token
Golang语言使用 jwt-go 库生成和解析 token
703 0
|
6月前
|
人工智能 定位技术 开发者
魔搭上线最大MCP中文社区,支付宝、MiniMax等MCP独家首发
4月15日,中国第一AI开源社区魔搭(ModelScope)推出全新MCP广场,上架千余款热门的MCP服务,包括支付宝、MiniMax等全新MCP服务在魔搭独家首发。魔搭社区为AI开发者提供丰富的MCP服务及调试工具,并支持第三方平台集成和调用,通过开源开放的方式加速Agent及AI应用的创新和落地。
347 3
|
前端开发 安全 JavaScript
有哪些常见的前端问题和解决方案
【4月更文挑战第13天】前端开发常见问题及解决方案:页面渲染性能优化(减少重绘、回流,利用GPU加速,代码拆分)、响应式设计(媒体查询、弹性布局)、浏览器兼容性(使用前缀,兼容性库,浏览器嗅探)、事件处理(事件委托、防抖节流)、代码组织(模块化、构建工具)、安全性(输入验证、HTTPS、安全HTTP头)和资源加载(CDN、资源优化、错误处理)。
1477 6
|
12月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
381 0
|
Linux iOS开发 MacOS
安装Python 在 Windows、macOS 和 Linux上的详细步骤
安装Python 在 Windows、macOS 和 Linux上的详细步骤
499 2
|
机器学习/深度学习 运维 算法
[ICDE2024]多正常模式感知的频域异常检测算法MACE
阿里云计算平台大数据基础工程技术团队主导,与浙江大学合作的论文《Learning Multi-Pattern Normalities in the Frequency Domain for Efficient Time Series Anomaly Detection》被ICDE2024收录,该论文解决了云服务环境中不同服务存在不同正常模式,而传统神经网络一个训练好的模型只能较好捕捉一种或少数几种正常模式的问题,该论文提出的方法可以使用一个统一模型对不同服务进行检测,就达到比为每一个服务定制一个模型的SOTA方法更好的效果。
|
前端开发 关系型数据库 MySQL
SpringBoot-----从前端更新数据到MySql数据库
SpringBoot-----从前端更新数据到MySql数据库
164 1
|
人工智能 数据挖掘
人机协作:大模型与AIGC技术的融入
【1月更文挑战第15天】人机协作:大模型与AIGC技术的融入
573 2
人机协作:大模型与AIGC技术的融入
|
Windows
win11摄像头黑了用不了的七个解决办法
使用电脑时候,电脑摄像头会遇到黑了用不了,图像无法显示的问题。是设置的问题或者驱动的问题
1331 1
win11摄像头黑了用不了的七个解决办法
|
机器学习/深度学习 编解码 人工智能
诺亚最新!AOP-Net:一体式3D检测和全景分割的感知网络
本文提出了一种基于LiDAR的多任务框架——一体感知网络(AOP-Net),该框架结合了3D检测和全景分割。论文开发了双任务3D主干,以从输入的LiDAR点云中提取全景和检测级特征。此外,还设计了一个新的2D主干,将多层感知器(MLP)和卷积层交织在一起,以进一步提高检测任务性能。最后提出了一种新的模块,通过恢复在3D主干中的下采样操作期间丢弃的有用特征来引导检测头。该模块利用估计的实例分割掩码从每个候选目标中恢复详细信息。AOP-Net在nuScenes基准上为3D目标检测和全景分割任务实现了最先进的性能。此外,实验表明,论文的方法很容易适应任何基于BEV的3D目标检测方法,并显著提高了其性
诺亚最新!AOP-Net:一体式3D检测和全景分割的感知网络