angularjsl路由_AngularJS路由和模板
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的应用,真的就不难了。
2. 路由的代码实现
理论不多说了,直接上代码!! 还是基于我们之前用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)
html>
route
Route Demo index
2). 增加:app/views/route/list.html
这个页面是布局模板,是HTML的代码片段。包括了一组ID的列表,通过ID列表的链接,可以进入到ID的详细页面。
Route : List.html
ID{{ id }}
3). 增加:app/views/route/detail.html
这个页面是布局模板,是HTML的代码片段。通过ID访问,包含ID号, (ID的文章内容)
Route {{id}}: detail.html
4). 修改: app/scripts/app.js
这个是ng-app文件的定义,我们在demo-route.html中定义了routeApp,在这里需要声明。
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/route/list.html',
controller: 'RouteListCtl'
})
.when('/list/:id', {
templateUrl: 'views/route/detail.html',
controller: 'RouteDetailCtl'
})
.otherwise({
redirectTo: '/list'
});
}]);
在routeApp模块中,我们定义了路由和布局模板。routeApp的默认URL是/list,即http://localhost:9000/demo-route.html#/list。 跳转详细页的路由是/list/:id,id为参数。
同时,/list的布局模板是views/route/list.html,属于RouteListCtl的控制器管理空间。
5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。
routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
});分别对应该路由中的两个控制器声明。
angularjsl路由_AngularJS路由和模板相关推荐
- angularjs路由_AngularJS路由示例– ngRoute,$ routeProvider
angularjs路由 Today we will look into AngularJS Routing example using ngRoute module and $routeProvide ...
- angularjsl路由_AngularJs ng-route路由详解
本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现. ng-view的实现原理,是根据路由的切换,动态编译html模板-- ...
- [Vue.js] 路由 -- 前端路由
路由的基本概念与原理 路由 本质是对应关系 后端路由 概念 : 根据不同的用户URL请求,返回不同的内容 本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
- Vue3(撩课学院)笔记07-vueRouter路由,创建路由,路由重定向,路由跳转,动态路由,路由懒加载,路由嵌套,路由参数穿传递的两种形式,通过事件来跳转路由
1.vueRouter路由的两种模式 哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求 历史模式:putstate()和replaceState()方法入 ...
- vue 静态html 路由,vue路由教程之静态路由
前言 vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换, ...
- WebApi特性路由和路由前缀
特性路由 WebApi2默认的路由规则我们称作基于约定路由,很多时候我们使用RESTful风格的URI.简单的路由是没问题的,如 api/Products/{id},但有些事很难处理的,如资源之间存在 ...
- gin context和官方context_gin 源码阅读(二) 路由和路由组
" 上一篇讲的是gin 框架的启动原理,今天来讲一下 gin 路由的实现. 1 用法 还是老样子,先从使用方式开始: func main() { r := gin.Default() r.G ...
- php 前端页面的路由,ThinkPHP5路由
路由作用 1.根据实现定义的路由规则,检验URL请求,确定执行或者拒绝: 2.路由规则可自定义,隐藏了原URL地址,使访问地址,使访问更安全,地址更优雅. 路由模式 开启路由后,其实只有二中状态,要么 ...
- Honor7x能用鸿蒙系统吗,家庭无缝覆盖:Honor 荣耀 发布 分布式路由 和 路由2
家庭无缝覆盖:Honor 荣耀 发布 分布式路由 和 路由2899元/249元 2017-10-12 13:19:30 90点赞 54收藏 48评论 直达链接 除了畅玩7X和Waterplay平板,H ...
最新文章
- GitHub上的编程语言:JavaScript领衔Java次之
- 【Java 并发编程】线程池机制 ( ThreadPoolExecutor 线程池构造参数分析 | 核心线程数 | 最大线程数 | 非核心线程存活时间 | 任务阻塞队列 )
- CodeSmith实用技巧(二):使用FileNameEditor
- java服务端的 极光推送
- 带Lambda表达式的Apache Wicket
- Matlab中的continue、break和return语句
- Python编程常见出错信息及原因分析(5):安装扩展库
- data access components 2.0未响应_Vue2.x 源码剖析之响应式原理
- Linux学习-0927
- 【转】用VC2008编译最新SVN版本OpenCV源代码
- 用python画明星_Python也能成为毕加索?我用Python给小姐姐画了幅油画
- VIIRS SDR数据预处理(二)
- 在matlab中饼图种类,Excel2016中饼图的常见类型及绘制方法
- Android应用逆向——最好用的两个无源码调试器
- 北上杭是梦!“郑福贵”才是中国智慧城市的真相
- Pandas学习 - 索引
- vscode:解决按英文感叹号!+tab,无法生成html模板框架的问题
- CSDN日报20170317——《转行穷三年?未必!》
- 联想拯救者R7000_2020款黑屏解决方案
- 谈谈大数据时代企业如何进行数据治理体系建设