本文转载自：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. Shell字符串比较相等、不相等方法小结

    #!/bin/sh #测试各种字符串比较操作. #shell中对变量的值添加单引号,爽引号和不添加的区别:对类型来说是无关的,即不是添加了引号就变成了字符串类型, #单引号不对相关量进行替换,如不对$ ...

  2. Python-添加psutil模块到python2.7版本

    一.问题描述 1.导入模块psutil时提示报错:ImportError: No module named psutil 2.下载psutil模块后,安装python setup.py install ...

  3. 手工创建 efi,msr 分区 · Virgil Chan

    昨天在帮同学装 win10 的时候,不小心(不知道那是什么东西)把原系统的 efi 和 msr 盘删了,用 WinNTsetup 安装时 EFI PART 总显示红叉,安装后也进不去系统,想想应该是找 ...

  4. sys.argv的意义[转]

    sys.argv的意义 原文地址:https://www.cnblogs.com/zzliu/p/10775049.html 简单来说,sys.argv是一个参数列表,这个列表存放着从外界获取到的参数 ...

  5. Python爬虫开发教程

     正文   现在Python语言大火,在网络爬虫.人工智能.大数据等领域都有很好的应用.今天我向大家介绍一下Python爬虫的一些知识和常用类库的用法,希望能对大家有所帮助.其实爬虫这个概念很简单,基 ...

  6. mysql中用SQL增加、删除字段，修改字段名

    CREATE TABLE `tuser` ( `id` int(11) NOT NULL, `name` varchar(32) DEFAULT NULL, PRIMARY KEY (`id`) ) ...

  7. Ubuntu 18.04安装搜狗输入法

    Ubuntu 18.04安装搜狗输入法 打开 terminal,输入 fcitx,检查是否安装搜狗输入法依赖,若提示未安装使用以下命令安装 sudo apt-get install fcitx-bin ...

  8. git工作中常用操作总结

    这篇文章主要记录下工作中常用的git操作.主要是对之前文章记录的问题做个总结,这个其实在idea中操作更加简单 别名配置 在敲git 命令时,其实可以使用别名,比如 commit可以配置为ci 下面是 ...

  9. ZYNQ入门实例——定时器中断与程序固化

    一.前言 APU系统中CPU以串行执行代码的方式完成操作,软件方式很难做到精准计时,因此调用内部定时器硬件完成计时是更好的选择.本文以定时器中断方式控制LED周期性闪烁为例学习私有定时器的使用.同时学 ...

  10. 小白的springboot之路（十六）、mybatis-plus 的使用

    0-前言 mybatis plus是对mybatis的增强,集成mybatis plus后,简单的CRUD和分页就不用写了,非常方便,五星推荐: 1-集成 1-1.添加依赖 <!-- .集成my ...