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

    上期回顾 之前的一篇 剑指ConcurrentHashMap[基于JDK1.8] 给大家详细分析了一波JUC的ConcurrentHashMap,它在线程安全的基础上提供了更好的写并发能力.那么既然有 ...

  2. this.props

    React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象

  3. AndroidManifest.xml文件详解

    本文为安全专家李洋的最新一篇专栏文章<AndroidManifest.xml文件详解>.AndroidManifest.xml是一个跟安全相关的配置文件,该配置文件是Android安全保障 ...

  4. charles添加https支持

  5. 表单验证之JQuery Validate控件

    概述 jQuery Validation Plugin v1.14.0,基于JQuery,官网http://jqueryvalidation.org/ 该插件捆绑了一套有用的验证方法,包括 URL 和 ...

  6. The Integers and the Real Numbers

    以上我們談了一些 邏輯的基礎,接下來我們會談一些 數學的基礎,也就是整數與實數系統.其實我們已經用了很多,非正式地,接下來我們會正式地討論他們. 要 建構 實數系統的一個方法就是利用公理跟集合論來建構 ...

  7. SpringBoot图文教程11—从此不写mapper文件「SpringBoot集成MybatisPlus」

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...

  8. [Cts-Verifier]waiver-Camera-ITS-Test

    [问题描述] 工具:Cts-Verifier-9.0-R11.apk 测试Camera ITS Test时,点击该测试项后verifier apk闪退.重新打开后该项未pass变绿. [问题结论] A ...

  9. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

  10. 超详细，多图文介绍redis集群方式并搭建redis伪集群

    超详细,多图文介绍redis集群方式并搭建redis伪集群 超多图文,对新手友好度极好.敲命令的过程中,难免会敲错,但为了截好一张合适的图,一旦出现一点问题,为了好的演示效果,就要从头开始敲.且看且珍 ...