最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
AngularJS路由与模板templateUrl学习笔记
时间:2015-01-08 编辑:简简单单 来源:一聚教程网
1. AngularJS路由介绍
AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML)。AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由,虽然URL输入不一样,页面展示不一样,其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看,AngularJS做单页应用就有点标配的感觉了。
从这个角度想想,要实现一个gmail的应用,真的就不难了。
例子
AngularJS 本身就涉及到了WEB开发理念中的MVC,即模型 视图 控制器
而在PHP开发中已经有一套MVC的模型,难免有些晕
此段代码主要功能:根据URL动态参数变化,动态替换AngularJS所指定的模板
http://域名/index.html#/role/edit/2 指向 http://域名/role/edit?id=2
http://域名/index.html#/role/edit/3 指向 http://域名/role/edit?id=3
参数详解:
url: 是匹配的url规则
templateUrl: 是指定模板,此参数可以
上代码:
代码如下 | 复制代码 |
// 编辑角色 |
url 后面增加了js随机数 防止缓存 Math.random()
好了,我们再看一个项目布局的例子
目录
AngularJS路由介绍
路由的代码实现
实现效果截图
. 路由的代码实现
理论不多说了,直接上代码!! 还是基于我们之前用yeoman构建的项目。
业务场景:论坛功能,帖子列表页(list.html) 和 帖子内容页(detail.html)。
代码文件:
1. 增加:app/demo-route.html
2. 增加:app/views/route/list.html
3. 增加:app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js
1). 增加:app/demo-route.html
这个文件是主页面(ng-app),包含视图(ng-view)
代码如下 | 复制代码 |
Route Demo index
|