夺命雷公狗—angularjs—19—angular-route
ngRoute包括的内容
ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块,包含以下内容:
$routeProvider 服务用来定义一个路由表,即地址栏与视图模板的映射
$routeParams 服务保存了地址栏中的参数,例如{id : 1, name : ‘tom’}
$route 服务完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller
指令ngView用来在主视图中指定加载子视图的区域
以上内容再加上$location服务,我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。
使用ng的路由机制
第一步:引入文件和依赖
ngRoute模块包含在一个单独的文件中,所以第一步需要在页面上引入这个文件,如下:
<script src="http://only.showtop.com/js/1.2.5/angular.min.js"></script> <script src="http://only.showtp.com/js/1.2.5/angular-route.min.js"></script>
光引入还不够,我们还需在模块声明中注入对ngRoute的依赖,如下:
var app = angular.module('MyApp', ['ngRoute']);
完成了这些,我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。
第二步:定义路由表
$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。
route参数是一个object,用来指定当path匹配后所需的一系列配置项,包括以下内容:
controller //function或string类型。在当前模板上执行的controller函数,生成新的scope
controllerAs //string类型,为controller指定别名
template //string或function类型,视图所用的模板,这部分内容将被ngView引用
templateUrl //string或function类型,当视图模板为单独的html文件或是使用了<script type=”text/ng-template”>定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址
最简单情况,我们定义一个html文件为模板,并初始化一个指定的controller:
function emailRouteConfig($routeProvider){$routeProvider.when('/show', {controller: ShowController,templateUrl: 'show.html'}).when('/put/:name',{controller: PutController,templateUrl: 'put.html'}); };
otherwise(params)方法对应路径匹配不到时的情况,这时候我们可以配置一个redirectTo参数,让它重定向到404页面或者是首页。
第三步:在主视图模板中指定加载子视图的位置
我们的单页面程序都是局部刷新的,那这个“局部”是哪里呢,这就轮到ngView出马了,只需在模板中简单的使用此指令,在哪里用,哪里就是“局部”。例如:
<div ng-view></div>
或者:
<ng-view></ng-view>
转载于:https://www.cnblogs.com/leigood/p/5790588.html
夺命雷公狗—angularjs—19—angular-route相关推荐
- 夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout
这里其实和js源生的效果是一样的,但是源生的在angularjs里面不能直接正常执行代码如下所示: <!DOCTYPE html> <html lang="en" ...
- 夺命雷公狗—angularjs—10—angularjs里面的内置函数
我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...
- 夺命雷公狗—angularjs—11—service的基本概念
我们先来研究下service里面的四大服务.. value 变量 constant 常量 factory 工厂模式 service 服务 <!DOCTYPE html> <ht ...
- 夺命雷公狗---微信开发26----客服消息接口基础和推送视频
我们按照上一课的套路继续改写下index.php即可实现,代码如下所示: <?php /*** wechat php test*///define your token require_once ...
- 夺命雷公狗---微信开发39----微信语言识别接口1
语音识别接口的基本介绍 注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表 ...
- 夺命雷公狗-----React---5--props对象的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 夺命雷公狗TP3.2.3商城2-----后台模版引入和后台控制器的创建
首先我们来到D:\phpStudy\WWW\shop\WEB 目录下,将Home目录进行复制一份,并且改名为Admin,如下所示: 然后将我们准备好的后台首页模版放入 D:\phpStudy\W ...
- 夺命雷公狗ThinkPHP项目之----商城1项目整体架构
夺命雷公狗项目之---商城 本人准备更新套基于tp下开发的商城的项目,为啥呢?原因和简单,本人没使用过框架开发商城,准备用一些时间来开发套B2C的商城系统.. 项目规划: 1:项目整体架构 用户部分 ...
- 夺命雷公狗—玩转SEO---62---TF-IDF核心算法与运用
比如我们站点有一篇文章,搜索引擎想过来提取一篇文章的关键词,这是涉及到数据挖掘.文本处理.信息检索等很多的领域,但是出乎意料的是,有一个非常简单的经典算法,可以给出令人相当满意的结果.它简单到都不需要 ...
最新文章
- IDEA的这几个调试的骚操作,用了都说爽!
- 2021牛客暑期多校训练营(二) J. Product of GCDs 不动脑子的莫比乌斯反演做法(
- ML之PLiR之LARS:利用LARS算法求解ElasticNet回归类型(包括类别编码+属性重要程度排序)问题(实数值年龄预测)
- String类中的intern()方法详解
- mysql登录不了了_登录不了MySQL的解决方法
- agc015F - Kenus the Ancient Greek(结论题)
- 基于centos6.7的docker私有仓库搭建
- [Java基础]反射获取构造方法并使用
- 全面认识UML类图元素
- 如果量子计算机成功应用,这世界上还有普通人的生存空间吗?
- 独家对话华为王成录:手机 HarmonyOS 开发者 Beta 版将如约而至
- 【二分法】计蒜客:切割钢管
- 微软Asp.Net架构与项目团队管理建设模型分析
- ES6学习笔记 -- 尾调用优化
- SQL Server 创建索引(index)
- matplotlib常用图形
- 最有效地戒掉晚睡强迫症(熬夜强迫症、假象失眠症等等)
- 台式win10系统你要来自Trustedinstaller的权限才能对此文件进行更改?
- 上海公积金网上提取全流程(图文版)在职公积金,离职公积金都可以提取
- GEO,IGSO,MEO,LEO