AngularJS学习笔记(三) 单页面webApp和路由(ng-route)
就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了。因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关键。
1.单页面webApp
为什么叫单页面webApp?因为它是单页面的。。。。额。。。关键在于我们看到的不少webApp是多页面的啊,可以从一页跳到另一页。嗯,看起来是这样,不过实际上这几页实际还是一个页面,因为它们是一次性加载进来的,至于为啥会有跳转效果呢?嗯,有点儿像选项卡,嗯。其实现原理在html5之前是通过hashbang,H5是History。这篇文章主要讨论的是hashbang。为什么要用#呢?当然我们可以直接多页面,就跟做网站一样。但是这么做最大的问题是:每次切换都需要重新加载页面。我们可以接受进入一个app的时候多花几秒加载,而在使用App的时候切换页面的时候多等个一两秒就会给用户一种这app好卡的感觉。
另外webApp另外一个好处就是可以减轻服务器压力,后台只管给数据。嗯,其实我不是很懂这一点。。以后再补充吧。
2.路由(ng-route)
那么怎么把单页面webapp(SPA)做成多页面的样子呢?就是怎么来管理这些页面呢?就要靠路由了。
来个案例,这是一个信息管理系统,管用户注册,注销,用户列表,用户详情之类的东西。
<!DOCTYPE html>
<html lang="en" ng-controller="userlist">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<table>
<tr ng-repeat="x in data" ng-click="detail($index)">
<td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看详情</a></td>
</tr>
</table>
</div>
</body>
</html>
html我就粘一部分,这一部分是显示用户列表的,点击对应用户需要显示它们的对应信息。为什么选这一部分,是因为这里需要做地址传参。
再看看对应的管路由跳转的js代码
m1.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/aaa",{
templateUrl:"register.html",
controller:"register"
}).when("/bbb",{
templateUrl:"cancel.html",
controller:"cancel"
}).when("/ccc",{
templateUrl:"userlist.html",
controller:"userlist"
})
.when("/ddd/:index",{
templateUrl:"detail.html",
controller:"detail"
})
.otherwise({redirectTo:"/aaa"});
}])
其中
.when("/ddd/:index",{
templateUrl:"detail.html",
controller:"detail"
})
对应着用户列表页面。
首先,m1.config(["$routeProvider",function($routeProvider)])是注入模块的过程,因为ng-route是一个独立于ng之外的模块,是一个独立的js文件。
然后,when函数的参数,第一个是url地址(后面接的:index待会讲地址传参的时候再说)。templateUrl是转到的页面地址(内容少的话可以用template),controller写跳转到的页面的控制器。
跳转之后的页面url大概是长这样的:http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd
最后说说地址传参的问题,在详细页中,我们只需要显示对应的一个人的信息,就是说不管你点谁的详情显示的一个页面,但是你需要告诉详情页点击的究竟是哪个按钮,我该渲染哪个。代码里的:index代表着你点击的用户的列表索引(就是你点击的是第几个用户),传索引是因为用户信息数据是用数组存的。在列表页中,这个变量叫index或者啥的都无所谓,因为这只是占了个坑,代表这里传的值可以用这个变量来取(当然这个名字在跳转过去的详情页是有用的)。再看看对应的html怎么写的
<tr ng-repeat="x in data" ng-click="detail($index)">
<td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看详情</a></td>
</tr>
这里的$index对应的就是点击的这个tr在这个表格中的索引,确切的来说是x是data中的第几项。index就对应了{{$index}}
如果加上了参数的话,跳转页的url长这样http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd/0
后面多加的这个0就是传的参数了,想要在跳转页取到这个参数,可以用$routeParams
m1.controller("detail",["$scope","$routeParams",function($scope,$routeParams){
$scope.index=$routeParams.index;
}]);
就是说,这里$routeParams.index中的index对应着在when函数中写的那个。
说句题外话,之前我不用地址传参的时候,实现”多页面"通信的方式是在$rootScope里写个属性存上要传的数据,毕竟ng只有一个$rootScope。虽然没想出这么做有什么不妥,但是内心当中总觉得好别扭。。
下一节说说自定义指令。
AngularJS学习笔记(三) 单页面webApp和路由(ng-route)的更多相关文章
- angularjs学习笔记三——directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...
- 小程序学习笔记三:页面文件详解之视图层WXML、WXS、WXSS文件
视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件 ...
- AngularJs学习笔记-表单处理
表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule (2)模板式表单 在Angular中使用for ...
- JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Creating Services
原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...
随机推荐
- 2017湘潭赛 A题 Determinant (高斯消元取模)
链接 http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1260 今年湘潭的A题 题意不难 大意是把n*(n+1)矩阵去掉某一列 ...
- CocoaPods报错:The dependency `` is not used in any concrete target
内容提要: podfile升级之后到最新版本,pod里的内容必须明确指出所用第三方库的target,否则会出现The dependency `` is not used in any concrete ...
- 【puppeteer+Node.js安装环境】之步骤
步骤一:首先,安装node.js环境,从官网下载最新的安装包. 步骤二:安装完成之后,再安装npm,通过命令行输入:npm install -g cnpm --registry=https://reg ...
- jQuery动态加载JS以减少服务器压力
如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加 ...
- hdu 4902 Nice boat(线段树区间改动,输出终于序列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4902 Problem Description There is an old country and ...
- 求最小正整数x,A^x=1(mod M)求阶模板
整数的阶:设a和n是互素的正整数,使得a^x=1(mod n)成立的最小的正整数x称为a模n的阶 //求阶模板:A^x=1(mod M),调用GetJie(A,M) //输入:10^10>A,M ...
- And Then There Was One(约瑟夫环)
https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- 《Java线程池》:任务拒绝策略
在没有分析线程池原理之前先来分析下为什么有任务拒绝的情况发生. 这里先假设一个前提:线程池有一个任务队列,用于缓存所有待处理的任务,正在处理的任务将从任务队列中移除.因此在任务队列长度有限的情况下就会 ...
- 关于UIView的hitTest:withEvent:方法的理解
闲来无事 观摩别人的项目 常常发现对UIView的hitTest:withEvent:方法的重写,以前也查过这个方法的用法作用,但是时间一长又忘记了.今天再次看到,就记录一下. 用户触摸屏幕后事件的传 ...
- IE11 for Windows 7 Enterprise With SP1 故障
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jaminwm/article/details/29592027 这个故障非常诡异,卸载IE11也没实 ...