【angularJS】Route路由
介绍
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。
通常我们的URL形式为 http://w3cschool.cn/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:
http://w3cschool.cn/#/first
http://w3cschool.cn/#/second
http://w3cschool.cn/#/third
# 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
示例
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul> <div ng-view></div>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
示例解析【定义】
- 1、载入了实现路由的 js 文件:angular-route.js。
- 2、包含了 ngRoute 模块作为主应用模块的依赖模块。
- 3、使用 ngView 指令。
· angular.module('routingDemoApp',['ngRoute'])
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
- 配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
- AngularJS 模块的 config 函数用于配置路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。
路由设置对象
AngularJS 路由也可以通过不同的模板来实现。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明:
- template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
.when('/computers',{template:'这是电脑分类页面'})
- · templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
- controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
- controllerAs:
string类型,为controller指定别名。
- redirectTo:
重定向的地址。
- resolve:
指定当前controller所依赖的其他模块。
问题:route #!与#
https://blog.csdn.net/xiaozhi_2016/article/details/62887989
Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法,结果这两种写法在Angular1.6中没有任何反应。
结果查看了下浏览器地址栏,默认视图链接竟然显示“#!/..”,是的,中间多加了个!号。
AngularJS升级到了1.6版本后,里面多了很多/#!/的改动。那么1.6究竟做了哪些改变呢?可以参考这个:https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52
解决方案:
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
//前端不用<a href="#!/computers"> 而直接用 <a href="#/computers">
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', { template: '这是首页页面' })
.when('/computers', { template: '这是电脑分类页面' })
.when('/printers', { template: '这是打印机页面' })
.otherwise({ redirectTo: '/' });
【angularJS】Route路由的更多相关文章
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
- MVC3/4/5/6 布局页及Razor语法及Route路由配置
一.目录结构 二.Razor语法 代码块:@{},如:@{Html.Raw(“”);} @if(){} @switch(){} @for(){} @foreach(){} @while(){} @do ...
- angularJS中-$route路由-$http(ajax)的使用
后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器); 第一个例子: 在本地架设NODEJS, angular的所有请求都是请求本 ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- AngularJS(16)-路由
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- AngularJS:路由
ylbtech-AngularJS:路由 1.返回顶部 1. AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
随机推荐
- 如何停止你的Streaming Application
Spark 1.3及其前的版本 你的一个 spark streaming application 已经好好运行了一段时间了,这个时候你因为某种原因要停止它.你应该怎么做?直接暴力 kill 该 app ...
- Linux CentOS 7 安装字体库 & 中文字体
前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体库 ...
- bzo1016: [JSOI2008]最小生成树计数
现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的最小生成树 ...
- 1-25-循环控制符break、continue和函数详解
大纲: 1-for循环补充 1-1-for循环实战---类C格式应用 2-break.continue循环控制符 2-1实战:帮助理解break.continue作用 3-函数详解 3-1.脚本文件中 ...
- HDU 3397 线段树区间修改
Sequence operation Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- mbstring.so下载安装
linux下安装: $:cd /php7.0/ext/mbstring 切换到源码包目录下 $:/usr/local/php/bin/phpize 执行这句 $:./configure –with-p ...
- Symmetrical Network Acceleration with EBS 12
Andy Tremayne, my esteemed colleague and fellow blogger, has published a new whitepaper that discuss ...
- C++复习3.C/C++常量的知识
C/C++常量的知识 20130918 语言的实现隐含着使用着一些常量,如初始化全局变量静态变量,另外还有一些我们不曾感觉到的变量:函数地址(也就是函数名称), 静态数组的名字,字符串常亮的地址.常量 ...
- vue的v-model绑定数据问题
在我的项目中有一个这样的功能模块: 我们修改数据全是在前台的table中修改,然后把这个table的值带到后台.(理想:修改值后,点击确认值改变,点击取消值恢复原来的值)那么问题就来了: a)你修改值 ...
- js 滚到页面顶部
一.滚到顶部,且滚动中,用户滚动鼠标无效 <style> .div1, .div2, .div3, .div4 { height: 400px; width: 400px; } .div1 ...