移除AngularJS下URL中的#字符的方法

AngularJS 默认将会使用一个 # 号来对URL进行路由.

例如:

http://example.com/

http://example.com/#/about

http://example.com/#/contact

要获得干净的URL并将井号从URL中移除是很容易的.

完成两件事情就行了.

  1. 配置 $locationProvider
  2. 设置我们的相对连接的起点路径

$location 服务

在Angular中, $location服务会解析地址栏中的URL，并对你的应用程序作出改变，反之亦然.

我强烈推荐通读官方的 Angular $location 文档 以对$location 服务及其所提供的特性有一个了解.

$locationProvider 和 html5 模式（html5Mode）

我们会使用 $locationProvider 模块，并将html5Mode设置为true.

我们会在你定义Angular应用程序并配置你的路由时做这些.

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);
 });

什么是 HTML5 History API? 它是使用一个脚本来操作浏览器历史的标准方法. 有了它就能在不刷新页面的前提下让 Angular 改变路由和页面的URL. 更多的信息，这里有一篇蛮好的 HTML5 History API 文章.

为相对链接设置<base>

为了在应用程序各处使用相对链接，你将需要在你文档的<head>里面设置一个<set>.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">

 <base href="/">
</head>

有大量的方法可以用来配置这个东西，而将HTML5Mode设置为true就会自动的解析相对链接了. 在我这儿这种方式总是能起效. 如果你应用程序的根同url相比有所不同,例如 /my-base, 那就用那个作为你的起点路径.

老浏览器的回调

$location服务对不支持HTML5浏览历史API的浏览器将自动回调hashbang方法。

一切的发生对你是透明的，你不需为此做任何配置。从Angular $location文档中，你可以看到回调的方法已经它是如何工作的。


总结

这是一个在Angular应用中获得漂亮URL并删除哈希标记的简单方法。享受超洁净、超快速的Angular应用吧！

赞 (0)

相关推荐

  • AngularJS中一般函数参数传递用法分析

    AngularJS中一般函数参数传递用法分析

    本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • 详解在Angularjs中ui-sref和$state.go如何传递参数

    详解在Angularjs中ui-sref和$state.go如何传递参数

    1 ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: <a ui-sref="message-list">消息中心</a> $state.go('someState')一般使用在 controller里面: .controller('firstCtrl', function($scope, $state) { $state.go('login'); }); 这两个本质上是一样的东西,我们看ui

  • AngularJS页面带参跳转及参数解析操作示例

    本文实例讲述了AngularJS页面带参跳转及参数解析操作.分享给大家供大家参考,具体如下: 页面带参跳转 $scope.LoginSucessLocation = function () { var hre = 'http://ctb.qingguo.com/weixinCt/main#/upload_topic_start?uid=' + $scope.uid + '&orgcode=' + $scope.orgCode; location.href = hre; } 在url的后面,增加?

  • AngularJS入门教程二：在路由中传递参数的方法分析

    本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

  • AngularJS通过$location获取及改变当前页面的URL

    注意 本文中获取与修改的URL以 'http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例: 一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $locati

  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

  • AngularJS中$http服务常用的应用及参数

    AngularJS中$http服务常用的应用及参数

    前言 $http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容,这个函数返回一个promise对象,具有success和error方法. $http服务的使用场景: var promise = $http({ method:"post", // 可以是get,post,put, delete,head,jsonp;常使用的是get,post url:"./data.json"

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

随机推荐