一个简单的方法去掉angular application中URLs的hashtag
本文转载自:Pretty URLs in AngularJS: Removing the #
By default, AngularJS will route URLs with a hashtag.
For example:
http://example.com/
http://example.com/#/about
http://example.com/#/contact
It is very easy to get clean URLs and remove the hashtag from the URL.
There are 2 things that need to be done.
- Configuring $locationProvider
- Setting our base for relative links
$location Service
In Angular, the $location
service parses the URL in the address bar and makes changes to your application and vice versa.
I would highly recommend reading through the official Angular $location docs to get a feel for the $location service and what it provides.
$locationProvider and html5Mode
We will use the $locationProvider
module and set html5Mode
to true.
We will do this when defining your Angular application and configuring your routes.
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);
});
What is the HTML5 History API? It is a standardized way to manipulate the browser history using a script. This lets Angular change the routing and URLs of our pages without refreshing the page. For more information on this, here is a good HTML5 History API Article.
Setting For Relative Links
To link around your application using relative links, you will need to set a <base>
in the <head>
of your document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
There are plenty of other ways to configure this and the HTML5 mode set to true should automatically resolve relative links. This has just always worked for me. If your root of your application is different than the url (for instance /my-base
, then use that as your base.
Fallback for Older Browsers
The $location service will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API.
This happens transparently to you and you won't have to configure anything for it to work. From the Angular $location docs, you can see the fallback method and how it works.
In Conclusion
This is a simple way to get pretty URLs and remove the hashtag in your Angular application. Have fun making those super clean and super fast Angular apps!
最新文章
- linux 网卡接收多播MAC(01:08开头)
- 2014 Super Training #1 F Passage 概率DP
- nc 常用命令
- JS完成改变新闻字体大中小的显示
- Mysql日期和时间函数不求人
- python sklearn.linear_model.LinearRegression.score
- 彻底理解Oracle中的集合操作与复合查询
- select 如何在选中后获取选中的时是什么元素 ,(原生js)
- FZU 2254 英语考试
- 数据仓库专题19-数据建模语言Information Engineering - IE模型(转载)
- VIM 与 系统剪切版
- Linux常用基本命令[cp]
- 【javascript】escape()、encodeURI()、encodeURIComponent()区别详解
- IOS开发 REST请求 ASIHTTPRequest用法
- luogu3261 懒惰左偏树 [JLOI2015]城池攻占
- Yii常用变量
- css加载方式link和@import的区别!
- iOS开发之使用AFN上传图片
- Openssl ecparam命令
- WCF 服务管理