移除AngularJS下URL中的#字符的方法_AngularJS
例如:
http://example.com/
http://example.com/#/about
http://example.com/#/contact
要获得干净的URL并将井号从URL中移除是很容易的.
完成两件事情就行了.
- 配置 $locationProvider
- 设置我们的相对连接的起点路径
$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 文章.
为相对链接设置
为了在应用程序各处使用相对链接,你将需要在你文档的
里面设置一个有大量的方法可以用来配置这个东西,而将HTML5Mode设置为true就会自动的解析相对链接了. 在我这儿这种方式总是能起效. 如果你应用程序的根同url相比有所不同,例如 /my-base, 那就用那个作为你的起点路径.
老浏览器的回调
$location服务对不支持HTML5浏览历史API的浏览器将自动回调hashbang方法。
一切的发生对你是透明的,你不需为此做任何配置。从Angular $location文档中,你可以看到回调的方法已经它是如何工作的。
总结
这是一个在Angular应用中获得漂亮URL并删除哈希标记的简单方法。享受超洁净、超快速的Angular应用吧!
上一篇: javascript伸缩型菜单实现代码_javascript技巧
下一篇: php数组操作学习笔记
推荐阅读
-
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
angularjs下ng-repeat点击元素改变样式的实现方法
-
AngularJS在IE下取数据总是缓存问题的解决方法
-
AngularJS中ng-options实现下拉列表的数据绑定方法
-
angularjs中的$eval方法详解
-
详解AngularJS中$http缓存以及处理多个$http请求的方法
-
AngularJs中route的使用方法和配置
-
ios设备中angularjs无法改变页面title的解决方法
-
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法