AngularJS开发指南14:AngularJS的服务详解
服务是一种由服务器端带到客户端的特性,它由来已久。AngularJS应用中的服务是一些用依赖注入捆绑在一起的可替换的对象。服务是最常和依赖注入一起用的,它也是AngularJS中的关键特性。
接下来,我们详细讲解下$location服务。
$location服务,解析地址栏中的URL(基于window.location),让你在应用代码中能获取到。改变地址栏中的URL会反应到$location服务中,反之亦然。
$location服务:
- 暴露当前地址栏的URL,这样你就能
- 获取并监听URL。
- 改变URL。
- 当出现以下情况时同步URL
- 改变地址栏
- 点击了后退按钮(或者点击了历史链接)
- 点击了一个链接
- 一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash)
window.location和$location.service的区别:
window.location | $location.service | |
目的 | 允许对当前浏览器位置的读写 | 同左 |
API | 暴露一个能被读写的对象 | 暴露jquery风格的读写器 |
是否在AngularJS应用生命周期中和应用整合 | 否 | 在应用声明周期内的每一个阶段可获取到,并且和$watch整合 |
是否和HTML5 API的无缝整合 | 否 | 是(对低级浏览器优雅降级) |
和应用的上下文是否相关 | 否,window.location.path返回"/docroot/actual/path" | 是,$location.path()返回"/actual/path" |
什么时候该用$location
在你想对URL的改变做出响应时,或者在你想改变当前URL时。
它不能用来干什么
在URL改变时,不能刷新整个页面。一定要的话,用低级的API,$window.location.href
。
$location服务的具体行为取决于它初始化时的配置。默认设置对大多数应用都是适合的,你也可以自定义配置来增加些新特性。
$location服务初始化好以后,你就可以使用jquery风格的读写器和它交互了,你可以获取或者改变当前URL。
要配置$location服务,检索$locationProvider并把参数设置成以下这样:
html5Mode(模式): {boolean}
true - 参阅HTML5模式
false - 参阅Hashbang模式
default: falsehashPrefix(前缀): {string}
Hashbang URLs的前缀 (在Hashbang模式中或者低级浏览器中使用)
default: '!'
配置示例
$locationProvider.html5Mode(true).hashPrefix('!');
读写器(getter and setter)
$location服务为URL只读部分(absUrl, protocol, host, port)提供读方法,为可读写部分(url, path, search, hash)提供读写方法。
所有的写方法返回同一个$location对象来支持链式操作。
$location服务有一个特殊的replace
方法可以用来告诉$lacation服务下一次自动和浏览器同步,上一条浏览记录应该被替换而不是创建一个新的。这在重定向的时候很好用。不这样的话容易使后退按钮失效(点后退时会又触发重定向)。要改变URL而不添加新的历史记录,你可以这样做:
$location.path('/someNewPath');
$location.replace();
// or you can chain these as: $location.path('/someNewPath').replace();
注意:写方法并不会马上更新window.location,而是在作用域的$digest阶段将多个$location操作合并成一个对windiow.location对象的commit
操作。因为多个操作之后对浏览器来说都会只是一个,所以只要调用一次replace()
方法就能实现浏览器记录的替换操作。一旦浏览器更新了,$location服务就会将replace方法的标志重置,以后的改变就会创建新的历史记录,直到再次调用replace方法。
你可以给$location服务传递特殊字符,它会根据RFC 3986规则来编码。当你调用写方法时:
- 所有传递给写方法(如path(), search(), hash())的值都会被编码。
- 读方法(path(), search(), hash()不带参数的调用)返回解码后的值。
- 当你调用absUrl()时,会返回各部分经过了编码的完整url。
- 当你调用url()时,返回的值是path, search 和hash,形式是
/path?search=a&b=c#hash
。
$location服务有两种用来控制地址栏URL格式的配置:Hashbang模式(默认)和HTML5模式(使用HTML5历史API)。应用会使用两种模式中相同的API,并且$location服务会使用需要的URL片段和浏览器API来帮助改变URL或者进行历史管理。
它们两者的区别:
Hashbang模式 HTML5模式
配置: 默认 { html5Mode: true }
URL格式: 所有浏览器都支持hashbang URLs 在高级浏览器中使用regular URLs,低级浏览器使用hashbang URLs
<a href=""> 链接重写: 否 是
需要服务器端配置: 否 是
Hashbang模式(默认mode)
使用这个模式的话,$location会在所有浏览器中使用Hashbang URLs。
支持网络爬虫
你需要添加特别的meta标记在你的文档的头部才能支持对你的AJAX应用的索引。
<meta name="fragment" content="!" />
这能让网络爬虫,请求带有_escaped_fragment_
形式的参数链接,这样你就能识别爬虫并且返回一个HTML的快照了。
HTML5模式
在HTML5模式中,$location服务的读写器和浏览器的URL地址通过HTML5历史API交互,这使你能用regular URL path搜索各组成部分,和hashbang是等效的。
- 在低级浏览器中使用了regular URL -> 重定向成hashbang URL
- 在现代浏览器中打开了一个hashbang URL -> 重写成regular URL
低级浏览器使用的降级
在支持HTML5 历史 API的浏览器中,$location服务的读写器和浏览器的URL地址通过HTML5历史API交互。 如果浏览器不支持HTML5 历史API, $location服务会自动降级成使用hashbang URLs。你就不用担心浏览器的支持性了。$location服务总是会用最好的选择。
Html链接重写
当你使用历史API模式时,在不同的浏览器中你需要使用不同的链接,但是你需要做的仅仅是指定好regular URL形式的链接,如 <a href="/some?foo=bar">link</a>
。
当用户点击这个链接时
- 在低级浏览器中,URL转换成
/index.html#!/some?foo=bar
- 在现代浏览器中转换成
/some?foo=bar
如果是下面的这几种形式,链接不会被重写。取而代之的是,浏览器会根据链接重新加载页面。
包含target的链接
Example:<a href="/ext/link?a=b" target="_self">link</a>
指向其他域的绝对路径 Example:
<a href="http://angularjs.org/">link</a>
当base被定义时,使用'/'开头指向一个不同的base路径。 Example:
<a href="/not-my-base/link">link</a>
相对链接
记住要检查所有的相对连接、图片、脚本等。你必须指定你主页面的base url(<base href="/my-base">
),或者你使用绝对路径也行,因为相对路径会结合文档的初始绝对路径转换成绝对路径。文档初始路径通常和应用的根路径不一样。
我们强烈推荐应用使用文档根节点开始的历史API,因为它能处理好所有相对路径的问题。
不同浏览器中的链接
因为HTML模式的重写能力,你的用户能在低级浏览器中使用regualr url,在现代浏览器中使用hashbang url。
- 在高级浏览器中会将hashbang URLs重写成regular URLs。
- 在低级浏览器中使用了regular URL会被重定向成hashbang URL。
注意
页面的重新加载
$location服务只能让你改变URL;不能让你重新加载页面。当你需要重新加载页面或者跳转到另外的页面时,请使用更低级别的API,$window.location.href。
在作用域生命周期外使用$location
$location知道应用作用域的声明周期。当URL改变时,它会更新$location,并且调用$apply,这样所有监听它的程序都会收到。当你在$digest阶段时改变URL。$location将改变传递给浏览器,并且通知所有的监听者。但是如果在应用之外使用$location的话(比如,在DOM事件中或者测试中),你就要手动调用它的$apply方法来传递改变了。
$location.path() 和 "!" "/" 前缀
一个路径应该总是以斜杠开始;$location.path()写方法会在没有前缀"/"时自动添加。
注意,hashbang模式中的"!"前缀实际上不是$location.path()的一部分,它其实是hashPrefix。
$location的双向绑定
AngularJS的编译器目前不支持对$location对象的双向绑定。如果你需要对$location对象(在input元素上使用ngModel指令)进行双向绑定,你需要指定一个带有两个监听者的额外的模型属性(比如locationPath),这两个监听者各负责一个方向。
<!-- html -->
<input type="text" ng-model="locationPath" />
// js - controller
$scope.$watch('locationPath', function(path) {
$location.path(path);
});
$scope.$watch('$location.path()', function(path) {
scope.locationPath = path;
});
加油!
AngularJS开发指南14:AngularJS的服务详解的更多相关文章
- AngularJS开发指南4:指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
- 移动IM开发指南2:心跳指令详解
<移动IM开发指南>系列文章将会介绍一个IM APP的方方面面,包括技术选型.登陆优化等.此外,本文作者会结合他在网易云信多年iOS IM SDK开发的经验,深度分析实际开发中的各种常见问 ...
- AngularJS开发指南14:依赖注入
推荐两种使用场景: 1.控制器中的依赖注入 控制器是负责应用行为的类.推荐的控制器声明方法如下: var MyController = function(dep1, dep2) { ... } MyC ...
- 第14章 启动文件详解—零死角玩转STM32-F429系列
第14章 启动文件详解 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/firege ...
- Android中Service(服务)详解
http://blog.csdn.net/ryantang03/article/details/7770939 Android中Service(服务)详解 标签: serviceandroidappl ...
- WCF中队列服务详解
WCF中队列服务详解 一.引言 在前面的WCF服务中,它都要求服务与客户端两端都必须启动并且运行,从而实现彼此间的交互.然而,还有相当多的情况希望一个面向服务的应用中拥有离线交互的能力.WCF通过服务 ...
- [ 转载 ] Java开发中的23种设计模式详解(转)
Java开发中的23种设计模式详解(转) 设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类 ...
- winxp计算机管理中服务详解
winxp计算机管理中服务详解01 http://blog.sina.com.cn/s/blog_60f923b50100efy9.html http://blog.sina.com.cn/s/blo ...
- 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解
原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从E ...
随机推荐
- D_S 循环队列的基本操作
// main.cpp #include <iostream> using namespace std; #include "Status.h" typedef in ...
- SSH 无密码访问其它机器 和 Windows 上 putty 无密码访问 Linux 机器
1. 从一台 Linux 机器(ubuntu1)上无密码访问其它机器(ubuntu2) (1)登录 ubuntu1 并切换到用户比如 s1 (2)运行 ssh-keygen -t rsa (3)运行c ...
- 【C#】SQL数据库助手类2.0(自用)
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...
- 网页中插入FLASH(swf文件),并且让Flash不遮挡HTML元素
一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定. 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...
- Centos7开启防火墙并且使MYSQL外网访问开放3306端口
http://www.cnblogs.com/kreo/p/4368811.html CentOS7默认防火墙是firewalle,不是iptables #先检查是否安装了iptables servi ...
- 保存带有emoji的文本报错解决方案
今天偶然遇到一个错误,就是保存文本的时候带有了emoji表情,报错了 java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x8A\ ...
- Unity3D 多平台 预编译 宏定义
平台定义 UNITY_EDITOR 编辑器调用. UNITY_STANDALONE_OSX 专门为Mac OS(包括Universal,PPC和Intelarchitectures)平台的定义. UN ...
- xampp 用phpmyadmin在页面上修改密码后,无法登陆,密码没问题
xampp 用phpmyadmin在页面上修改密码后,无法登陆,密码没问题一直提示密码错误, 什么原因? ------解决方案--------------------改了密码之后,phpmyadmin ...
- Selenium Webdriver元素定位的八种常用方式
楼主原创,欢迎学习和交流,码字不容易,转载请注明出处,谢谢. 在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素 ...
- java 12-5 StringBuffer的几个案例
1. 把数组拼接成一个字符串 public class StringBufferTest2 { public static void main(String[] args) { //定义一个数组 in ...