移除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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Js经典案例的实例代码
May 10 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue实现表格合并功能
Dec 01 Vue.js
使用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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
理解javascript中的闭包
2017/01/11 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
原JS实现banner图的常用功能
2017/06/12 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python随机数分布random测试
2018/08/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python request post上传文件常见要点
2020/11/20 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
党员剖析材料范文
2014/09/30 职场文书