AngularJS 中的友好 URL —— 移除URL 中的 # 【已翻译100%】

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

例如:

要获得干净的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 文章.

为相对链接设置

为了在应用程序各处使用相对链接,你将需要在你文档的

里面设置一个.

<!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应用吧!

时间: 2024-11-05 19:31:13

AngularJS 中的友好 URL —— 移除URL 中的 # 【已翻译100%】的相关文章

从内存中偷取未加密的 SSH-agent 密钥 【已翻译100%】

如果你曾使用SSH密钥来管理多台机器,那么你可能使用过SSH-agent.这个工具使SSH密钥在内存中持续化,这样用户就不用每次都输入口令.然而,这会导致一些安全风险.root用户可能有权限从内存中取出解密后的SSH密钥,并重构它. 由于需要root权限,这种攻击看起来没什么用.例如,一个攻击者可能安装一个Keylogger并使用它来获得SSH密钥的口令.然而,这要等待肉鸡输入它们的口令.这取决于肉鸡掉线的频度,可能需要几个小时,几天或几周.在快速攻击方法中,这也是为什么从内存中获取SSH密钥对

三星Galaxy S5电脑中的文件怎么移到手机中?

g下面我就以把音乐歌曲从电脑移到手机中为例子 1.我们先把S5手机与电脑连接,(推荐阅读:Galaxy S5 连接电脑图文教程). 2.然后在电脑中找到iphone文件夹,然后在iphone中会看到有一个音乐文件夹打开它. 3.好了现在我们在手机中找到[应用程序]. 4.然后再点击[音乐]如下图所示. 5.现在我们在音乐中点击音乐会看到你刚才复制的文件在音乐播放器中了我们点击就可以播放了.   好了其它的像图片,软件都可以使用此方法来移到手机哦.

AngularJS Hello World 代码实例,只需 6 步 【已翻译100%】

本文展示了AngularJS框架实现的hello world代码示例. 如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面. ng-app, ng-controller, ng-model 指令 带有两个大括弧的模板 步骤 1: 在部分包含Angular Javascript 将下面的代码包含入 中,以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库 获得最新的代码. <script src="//ajax.g

改善用户体验的 3 个 AngularJS 指令 【已翻译100%】

AngularJS指令可以为给你的访问者提供更好的用户体验,比如通过展示用户头像来使页面看起来更具个性化.在你的注册表单中,可以在电子邮箱地址一栏的旁边展示一个头像,指示用户输入的是否是一个正确的邮件地址.如果在你的表单中有可选输入项,你可以默认隐藏它们,当用户点击时再展示出来,并且立刻自动将焦点对准第一个输入框.这些方法非常容易实现,并且可以通过指令来获得复用. 你有许多方式来构建AngularJS指令.关于如果创建用户指令已经有非常多的教程和指导(所以我不打算在此描述一些基本的东西): An

在 AngularJS 应用中通过 JSON 文件来设置状态 【已翻译100%】

想象一个使用简单的angular UI路由的 angularjs 应用: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <script src="bower_components/angular/angular.js"></script> <script src

AngularJS 提交表单的方式 【已翻译100%】(1/2)

在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

AngularJS 提交表单的方式 【已翻译100%】(2/2)

简洁语法 这个例子是以字符串的方式发送数据,并且发送你的头信息.如果你不需要这些,并且希望Angular 的$http POST尽可能的简洁,我们可以使用简写方法: ... $http.post('process.php', $scope.formData) .success(function(data) { ... }); ... 绝对更简洁更容易记住方法. $http 内部控制器: 理想的,你可以将$http请求从controller移除到 service.这只是为了演示目的,我们将会尽快在

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 【已翻译100%】

本文为开发者呈现了一些概念和相关的示例代码,介绍了用ngResource($resource)服务POST方式提交数据到和服务器端SpringMVC环境下的RESTFul APIs.示例代码可以在如下页面找到:http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example.相对于使用$http服务,我更喜欢这种方法的主要理由是ngResource允许你使用抽象方式(例如$resource类),你

通过终端调试 AngularJS 应用 【已翻译100%】

当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难.下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访问作用域 通过一行简单的JS程序访问页面中任何作用域(甚至是隔离的作用域!): > angular.element(targetNode).scope()