本文转载自：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.

  1. Configuring $locationProvider
  2. 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!

一个简单的方法去掉angular application中URLs的hashtag的更多相关文章

  1. 一个简单的批量更新oracle 数据库中 最近的服务商名称的数据

    有一个需求是这样的,我们需要更新数据库中的数据,数据时这样的 1.大约50万以上 2. 数据中有较多的重复数据 3. 需要将表中最近的代理商的名称赋值给行中的服务商名称 4. 代理商的名称可能有多个, ...

  2. [VBA]用一个简单例子说明如何在Excel中自定义函数

    Excel中的函数无疑是强大的,但是再强大的战士也有他脆弱的脚后跟[1].这两天在使用Excel的时候遇到了一个需求,要在某一个单元格里面自动计算今天是星期几(如显示 Today is Tuesday ...

  3. 使用hadoop命令rcc生成Record 一个简单的方法来实现自己的定义writable对象

    hadoop 的bin文件夹以下一个rcc命令,网上介绍非常少.看了一下源代码.发现能够用来生成 java和c++的hadoop Record 类代码,比起自己直接实现writable 接口.简单非常 ...

  4. 一个简单的示例在spring boot中实现国际化

    最近在网上找了一个有关账单管理的spring boot项目,其中有一部分是涉及显示国际化信息的,即将页面上的中英文进行转换.因为在这之前这部分内容没有接触过,所以在这记录下过程. 中文效果图如下所示: ...

  5. 一个简单java爬虫爬取网页中邮箱并保存

    此代码为一十分简单网络爬虫,仅供娱乐之用. java代码如下: package tool; import java.io.BufferedReader; import java.io.File; im ...

  6. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. iPhone开发中从一个视图跳到另一个视图有三种方法：

    iPhone开发中从一个视图跳到另一个视图有三种方法:   1.self.view addSubView:view .self.window addSubView,需要注意的是,这个方法只是把页面加在 ...

  8. linux中内存泄漏的检測（一）最简单的方法

    什么是内存泄漏 内存泄漏是指程序动态申请的内存在使用完后没有释放,导致这段内存不能被操作系统回收再利用. 比如这段程序,申请了4个字节的空间但没有释放,有4个字节的内存泄漏. #include < ...

  9. 使用 CodeIgniter 创建一个简单的 Web 站点

    原文:使用 CodeIgniter 创建一个简单的 Web 站点 参考源自: http://www.ibm.com/developerworks/cn/web/wa-codeigniter/index ...

随机推荐

  1. Python时间操作所相关

    相关模块:time,datetime,calendar(日历模块) 获取当前时间: # 获取当前10位时间戳,默认返回为float类型 print int(time.time()) # output: ...

  2. Python---6条件判断与循环

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  3. 任务框架--Quartz 配置文件

    配置文件 Quartz 有一个叫做quartz.properties的配置文件,它允许你修改框架运行时环境.缺省是使用 Quartz.jar 里面的quartz.properties 文件.你应该创建 ...

  4. 下一个风口？迷你KTV能变成“绿巨人”吗

    近段时间,在全国各地多个商场.大学城等繁华地点,一种全新娱乐方式--迷你KTV变得火爆起来.这种仅能容纳两三人,以单首.时段等进行计费,且价格不低的点唱新模式,正成为投资者眼中的"新宠&qu ...

  5. 基于webhook方案的Git自动部署方案

    之前已经用Git实现了自己博客的提交自动部署,并自动提交到GitHub和coding以备不时之需.平时项目代码都托管在Coding或者GitHub上,也已经用上了coding提供的webhook功能, ...

  6. Android长按及拖动事件探究

    Android中长按拖动还是比较常见的.比如Launcher中的图标拖动及屏幕切换,ListView中item顺序的改变,新闻类App中新闻类别的顺序改变等.下面就这个事件做一下分析. 就目前而言,A ...

  7. Picaso完美兼容OkHttp3.3，缓存优化两不误 - Tamic Developer"s Blog

    为何在Fresco,Glide这么强大的背景下,我又想起了当初的Picasso,又为何写这篇文章?是因为最近项目采用了square公司的RxAndroid,Retrfit和OKhttp, 不得不联想到 ...

  8. JavaScript之三 - 语法

    1.block 一般就是{}包括起来的代码块,注意的是,js没有块作用域,但是有函数作用域,全局作用域. 2.var 1 var a = b = 1; 如: 123456 function () { ...

  9. Vizceral小白入门

    Vizceral小白入门 接到一个任务,要求将N个program可视化,能一目了然查看当前爬虫状态.记得之前做测试时,一个queue service前端可视化效果不错,经询问是用vizceral开源框 ...

  10. python django 之 django自定制分页

    自定制的分页模块 #!/usr/bin/env python3 # V1.1 解决问题: # 1). p 参数 为 负数 与 p 参数查过总页数时报错的问题 # V1.2 解决的问题: # 1). 点 ...