移除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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
模拟select的代码
2011/10/19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python学习 流程控制语句详解
2016/06/01 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python中的流程控制详解
2021/02/18 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
听课评语大全
2014/04/30 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python