本文转载自：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. Rime输入法一些设定

    有鉴于谷歌搜狗拼音等不太好用,但是博主一直页没找到合心的输入法,直到遇见Rime,中州韵就是我想要的输入法.记录一下自己用的时候的修改,以备查询.注意:缩进不要弄丢,所有更改完都需要重新部署才能生效. ...

  2. Pytorch随机种子

    最近在做比赛的时候,遇到了一个最好结果,但是之后无论怎样都复现不出来最好结果了.猜测是不是跟Pytorch中的随机种子有关. 训练过程 在训练过程中,若相同的数据数据集,相同的训练集.测试集划分方式, ...

  3. js之构造函数的理解

    在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式.对象字面量是一种灵活方便的书写方式,例如:   1 2 3 4 5 6 var o1 = {     p:”I’m in ...

  4. Internet上的音频/视频概述

    Internet上的音频/视频概述 计算机网络最初是为传送数据信息设计的.因特网 IP 层提供的"尽最大努力交付"服务,以及每一个分组独立交付的策略,对传送数据信息也是很合适的. ...

  5. 《前端面试加分项目》系列 企业级Vue瀑布流

    本文 GitHub github.com/ponkans/F2E 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习.文末有福利~~ 前言 接水怪又来 ...

  6. Pom.xml的依赖自动生成

    1.第一种用引入jar包的方法 网盘链接:https://pan.baidu.com/s/10HNjNeZc1d5QrFNtvLPWBA 提取码:oako 以上是整个文件直接用idea打开即可 imp ...

  7. 201771010105—达拉草 实验一 软件工程准备—<软件工程构建之法—初步了解和认识>

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. ubuntu 18.04 添加快快捷方式

    1. 创建启动软件的快捷方式的文件 # cd ~/桌面 # vim pycharm18.1.desktop # 注意文件的后缀是 .desktop [Desktop Entry] Version=1. ...

  9. 7-3 jmu-python-回文数判断（5位数字） (10 分)

    本题目要求输入一个5位自然数n,如果n的各位数字反向排列所得的自然数与n相等,则输出‘yes’,否则输出‘no’. 输入格式: 13531 输出格式: yes 输入样例1: 13531 输出样例1: ...

  10. CentOS7.5源码编译安装mysql5.7.29

    #查看系统版本 [root@ctos3 ~]# cat /etc/redhat-release CentOS Linux release (Core) #下载源码包,需要注意的是mysql5.7 编译 ...