移除AngularJS下URL中的#字符的方法


Posted in Javascript onJune 19, 2015

AngularJS 默认将会使用一个 # 号来对URL进行路由.

例如:

    http://example.com/

    http://example.com/#/about

    http://example.com/#/contact

要获得干净的URL并将井号从URL中移除是很容易的.

完成两件事情就行了.

  1.     配置 $locationProvider
  2.     设置我们的相对连接的起点路径

$location 服务

在Angular中, $location服务会解析地址栏中的URL,并对你的应用程序作出改变,反之亦然.

我强烈推荐通读官方的 Angular $location 文档 以对$location 服务及其所提供的特性有一个了解.

$locationProvider 和 html5 模式(html5Mode)

我们会使用 $locationProvider 模块,并将html5Mode设置为true.

我们会在你定义Angular应用程序并配置你的路由时做这些.
 

angular.module('scotchy', [])
  
 .config(function($routeProvider, $locationProvider) {
 
  $routeProvider
   .when('/', {
    templateUrl : 'partials/home.html',
    controller : mainController
   })
   .when('/about', {
    templateUrl : 'partials/about.html',
    controller : mainController
   })
   .when('/contact', {
    templateUrl : 'partials/contact.html',
    controller : mainController
   });
  
  // use the HTML5 History API
  $locationProvider.html5Mode(true);
 });

什么是 HTML5 History API? 它是使用一个脚本来操作浏览器历史的标准方法. 有了它就能在不刷新页面的前提下让 Angular 改变路由和页面的URL. 更多的信息,这里有一篇蛮好的 HTML5 History API 文章.

为相对链接设置<base>

为了在应用程序各处使用相对链接,你将需要在你文档的<head>里面设置一个<set>.
 

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 
 <base href="/">
</head>

有大量的方法可以用来配置这个东西,而将HTML5Mode设置为true就会自动的解析相对链接了. 在我这儿这种方式总是能起效. 如果你应用程序的根同url相比有所不同,例如 /my-base, 那就用那个作为你的起点路径.

老浏览器的回调

$location服务对不支持HTML5浏览历史API的浏览器将自动回调hashbang方法。

一切的发生对你是透明的,你不需为此做任何配置。从Angular $location文档中,你可以看到回调的方法已经它是如何工作的。

移除AngularJS下URL中的#字符的方法
总结

这是一个在Angular应用中获得漂亮URL并删除哈希标记的简单方法。享受超洁净、超快速的Angular应用吧!

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
百度地图自定义控件分享
Mar 04 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
ES6 Promise对象的应用实例分析
Jun 27 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
You might like
一个简单的网页密码登陆php代码
2012/07/17 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
中专生自我鉴定范文
2013/12/19 职场文书
单位领导证婚词
2014/01/14 职场文书
2014全国两会心得体会
2014/03/17 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
社区服务活动小结
2014/07/08 职场文书
群教班子对照检查材料
2014/08/26 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
介绍信样本
2015/01/31 职场文书
关于倡议书的范文
2015/04/29 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
vue封装数字翻牌器
2022/04/20 Vue.js