URL

URL

关注
发信
关注(28)粉丝(399)

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: false

    • hashPrefix(前缀): {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;

});

加油！

04-27 18:23
Powered by LMLPHP ©2024 URL 0.080717