移除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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
js实现AI五子棋人机大战
May 28 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
桌面中心(四)数据显示
2006/10/09 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
原生Javascript插件开发实践
2017/01/09 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
python爬取各类文档方法归类汇总
2018/03/22 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
explicit和implicit的含义
2012/11/15 面试题
2014年安全员工作总结
2014/11/13 职场文书
义诊活动通知
2015/04/24 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js
httpclient调用远程接口的方法
2022/08/14 Java/Android