使用$location的AngularJs的详细说明和示例代码

1.它是做什么的？

$location服务分析浏览器地址栏中的URL(基于window.location)，这样我们就可以在应用程序中更方便地使用URL中的内容。更改地址栏中的网址将响应$location服务，而修改$location中的网址也将响应地址栏。

$定位服务：

公开当前浏览器地址栏的URL，这样我们就可以

1.注意并观察URL2。更改网址

当用户执行以下操作时，将网址与浏览器同步：

1.更改地址栏2。单击后退或前进按钮(或单击历史链接)。3.单击链接

URL对象被描述为一系列方法(协议、主机、路径、搜索、散列)。

1.将$location与window.location进行比较

1)目的：window.location和$location服务都允许对当前浏览器的位置进行读写访问。

2) API: window.location公开了一个未处理的对象，该对象具有一些可以直接修改的属性；$location服务公开了一些jQuery风格的getter/setter方法。

3)与angular应用申报周期集成：$location知道所有内部申报周期的各个阶段，并与$watch集成；而window.location没有。

4)与HTML5 API无缝集成：是(有遗留浏览器的回退，兼容较低版本的浏览器？);而window.location没有。

5)知道应用程序加载的文档的根目录或上下文：window.location不工作，wnidow.location.path将返回“/docroot/sub path”；并且$location.path()返回真实的docroot。

2.我应该什么时候使用$location？

在应用程序中，每当需要响应当前URL的更改，或者想要更改当前浏览器的URL时。

3.它不做什么？

当浏览器网址改变时，不会导致页面重载。如果您需要这样做(更改地址并实现页面重载)，请使用较低级别的API，$window.location.href

二、原料药概述(原料药概述)

$location服务在初始化时会根据配置有不同的行为。默认配置适用于大多数应用程序，而其他配置是自定义的，这可以打开一些新功能。

当$location服务被初始化时，我们可以将其与jQuery样式的getter和setter方法一起使用，允许我们获取或更改当前浏览器的URl。

1.$定位服务配置

要配置$location服务，您需要获得$ location提供商(http://code.angularjs.org/1.0.2/docs/api/ng。$locationProvider)并设置以下参数：

html5Mode(模式):{boolean}，true -参见HTML5模式；false-参见Hashbang模式，默认值为： false。(以下部分将解释各种模式)

哈希前缀(prefix) : {string}，hashbang使用的前缀(当html5Mode为false时，使用hashbang模式适应不支持HTML5模式的浏览器)，默认值为： '！'

2.Getter和setter方法

$location服务为只读url部分(absUrl、协议、主机、端口)提供getter方法，为Url、路径、搜索和哈希提供getter和setter方法。

//获取当前路径$ location . path()；//更改路径$location.path ('/newvalue ')所有setter方法都返回相同的$location对象来实现链语法。例如，要在一句话中修改多个属性，链设置器方法类似：

$location.path('/newValue ')。搜索({ key : value })；

有一个特殊的替换方法，可以用来告诉$location服务在下次与浏览器同步时使用一个路径，而不是创建一个新的历史记录。当我们想要实现重定向而不使后退按钮无效(这再次触发重定向)时，replace方法很有用。如果我们想在不创建新历史记录的情况下更改当前URL，我们可以这样做：

$ location . path('/somewpath ')。替换()；

请注意，setter方法不会立即更新window.location。相反，$location服务将知道作用域的生命周期，并将多个$ location合并为一个，该位置将在作用域的$digest阶段提交给window.location对象。只是因为$location的多个状态的变化会合并成一个变化，所以在浏览器中只会调用一次replace()方法，这样整个提交就只有一个replace()了，不会导致浏览器创建额外的历史记录。浏览器更新后，$location服务将通过replace()方法重置标志位，除非再次调用replace()，否则未来的更改将创建新的历史记录。

Setter和字符编码

我们可以将特殊字符传递给$location服务，该服务将根据RFC3986自动对它们进行编码。当我们访问这些方法时：

传递到$location的setter方法中的所有值，如path()，search()，hash()，都将被编码。getter方法返回的值(没有参数)都被解码，例如path()，search()，hash()。当我们调用absUrl()方法时，返回值是包含编码部分的完整Url。当我们调用url()方法时，我们返回一个带有路径、搜索和哈希部分的编码url，例如/path？search=1b=c#hash .三.Hashbang和HTML5模式

$location服务有两种配置模式，可以控制浏览器地址栏的URL格式：Hashbang模式(默认)和基于HTML5 History API的HTML5模式。在这两种模式下，应用程序使用相同的API，$location服务将与正确的URL片段和浏览器API合作，帮助我们更改浏览器URL并管理历史记录。

1.哈斯邦模式(默认模式)

在这种模式下，$location在所有浏览器中都使用Hashbang URL。查看以下代码片段了解更多信息：

它('应该显示示例'，inject(函数($ location provider){ $ location provider . html 5 mode=false；$locationProvider.hashPrefix=“！”；}，函数($location) { //打开http://host.com/base/index.html#!/a $ location . AbsURL()==' http://host.com/base/index . html #！/a '；$ location . path()=='/a '；$ location . path('/foo ')；$ location . AbsURl()==' http://host.com/base/index . html #！/foo '；$ location . search()=={ }；//当//search中没有任何内容时，返回空对象$ location.search ({a:' b '，c : true })；$ location . AbsURl()==' http://host.com/base/index . html #！/foo？a=BC '；$location.path('/new ')。搜索(' x=y ')；//您可以按字符串更改搜索。每次设置search，都会覆盖之前的search $ location . aburl()==' http://host.com/base/index . html #！/新的？x=y '；}));抓取你的应用程序(允许谷歌索引我们的应用程序)

如果我们希望我们的Ajax应用程序被索引，我们需要在头部添加一个特殊的元标签:

元名称='片段'内容='！'/

在这样做的时候，爬虫机器人将使用_ escaped _ fragment _参数来请求当前链接，这样我们的服务器就可以知道爬虫机器人并提供相应的HTML快照。要了解这项技术的更多信息，您可以访问https://developers . Google.com/webmasters/Ajax-crawling/docs/specification。hl=zh-CN

四.HTML5模式

在HTML5模式下，$location service的getter和setter通过HTML5 History API与浏览器URL交互，允许用普通路径和搜索模块代替hashbang模式。如果某些浏览器不支持HTML5 History API，$location服务将自动退回到使用hashbang URL的模式。为了摆脱我们应用的浏览器没有明确显示是否支持历史API的担心，使用$location service是一个正确且最好的选择。

在旧浏览器中打开一个常规的网址将被转换为hashbangURL。

在现代浏览器中打开一个哈希表会将其重写为常规网址。

1.与旧浏览器向前兼容

对于支持HTML5历史API的浏览器，$location使用它们来编写路径和搜索。如果浏览器不支持历史API，$location将改为提供Hashbang URL。这是由$location服务自动转换的。

2.HTML链接重写

当我们使用历史API模式时，我们需要针对不同的浏览器提供不同的链接，但是我们只需要提供常规的URL，比如a href="/some？foo=bar "链接/a

当用户单击此超链接时：

在旧浏览器中，URL被更改为/index.html#！/一些？foo=bar

在现代浏览器中，网址将改为/some？foo=bar

在以下情况下，链接不会被重写，但页面将被加载到相应的Url中：

带有目标的超链接：a href='/ext/link？a=b' target='_self'link/a

不同领域的绝对链接：角度js.org/'link/a

设置基本路径后，使用以“/”开头的超链接链接到不同的基本路径：a href='/not-my-base/link ' link/a

3.服务器端

这样，我们在服务器上请求URL重定向。通常，我们需要将所有链接重定向到我们的应用程序。(例如index.html)。

4.抓取您的应用程序

和以前一样

5.相对链接

一定要检查所有相关的链接，图片，脚本等。我们必须在head中指定一个基本url(base href='/my-base ')，并且在任何地方都使用绝对url(以/)开头。因为相对url会根据文档的初始路径(通常不同于应用程序的根目录)转换成绝对URL。(相对url将使用文档的初始绝对URL解析为绝对URL，该绝对URL通常不同于应用程序的根目录).

我们强烈鼓励运行允许在文档根中使用历史应用编程接口的角度应用程序，因为这照顾到了相对链接。

6.在不同浏览器之间发送链接

(这里解释了两种模式的地址可以适应不同的浏览器，自动转换，再次重复.)

7.例子

在这个例子中，我们可以看到$location的两个实例，它们都是html5模式，但是它们在不同的浏览器中，所以我们可以看到它们之间的区别。这些$location服务连接到两个假的“浏览器”。每个输入代表浏览器的地址栏。

注意，当我们在第一个“浏览器”(或者第二个？)，它不会重写或重定向另一个Url，这个转换过程只会在页面重载时发生。

！DOCTYPE html html ng-app head base href=' '/meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title false-browser/title meta content=' IE=edge，chrome=1 ' http-equiv=' X-UA-Compatible '样式类型='text/css ' .ng-斗篷{ display : none }/style/head dydiv ng-不可绑定类=' html 5-hashbang-example ' div id=' html 5-mode ' ng-controller=' Html 5 cntl '带有历史API的H4浏览器/H4 div ng-地址栏browser=' html 5 '/div brbr $ location。protocol()={ $ location。protocol()} } br $ location。host()={ $ location。host()} } br $ location。port()={ $ location。port()} } br $ location。port()=.a=b'/base/first？a=b/a | a href=' http://www主持人。com/base/sec/ond？标志#哈希秒/秒？标志# hash/a | a href='/other-base/other？搜索'外部/a/div id=' hashbang-mode ' ng-controller=' HashbangCntl ' H4浏览器不带历史空气污染指数/H4分区地址栏browser=' has bang '/div brbr $ location。protocol()={ $ location。protocol()} } br $ location。host()={ $ location。host()} } br $ location。port()={ $ location。port()} } br $ location。path()={ $ location。path()} } br $ location。search()={ { $ location。a=b'/base/first？a=b/a | a href=' http://www主持人。com/base/sec/ond？标志#哈希秒/秒？标志# hash/a | a href='/other-base/other？搜索"外部/a/div/div脚本src="http :/棱角分明。js ' type=' text/JAVAScript '/script script type=' text/JAVAScript '函数FakeBrowser(initUrl，baseHref){ this。onurlchange=function(fn){ this。urlchange=fn};这个。URL=function(){ return IntURl；};这个。delay=function(fn，delay){ setTimeout(function(){ fn()；},延迟| | 0);};这个。baseHref=function(){ return baseHref；};这个。notify what out endingrequests=angular。noop} var browsers={ html 5: new FakeBrowser(' http://www。主持人。com/base/path？a=b#h '，'/base/index.html ')，hashbang : new FakeBrowser(' http://www。主持人。com/base/index。html #！/path？a=b#h '，'/base/index。html ')}；函数Html5Cntl($scope，$location) { $scope .$ location=$ location}函数HashbangCntl($scope，$location) { $scope .$ location=$ location}函数initEnv(name){ var root=angular。元素(文档。getelementbyid(name '-mode ')；angular.bootstrap(root，[ function ($compileProvider，$locationProvider，$ provider){ debugger；$ location提供程序。html 5模式(真).hashPrefix('！');$提供。value($ browser，browsers[name])；$提供。value($ document，root)；$provide.value('$sniffer '，{ history : name==' html 5 ' })；$ compileprovider。指令(' ngAddressBar '，function(){ return function(scope，elm，attrs){ var browser=browsers[attrs]。浏览器]，输入=角度。元素('输入类型=' text ' style=' width :400 px'').val(browser.url())，延迟；输入。bind('键按下键向上键向下键'，function () { if(！延迟){ delay=setTimeout(FireurlChange，250)；} });浏览器。URL=函数(URL){返回输入。val(网址)；};elm.append('Address: ').追加（输入);函数fireurlChange(){ delay=null；浏览器。urlChange(输入。val())；} };});} ]);root.bind('单击')，函数(e){ e . stopperpagation()；});} initEnv(' html 5 ')；initEnv(' hashbang ')；/脚本/正文/html五、附加说明

1.页面重新加载导航

$位置服务仅仅允许我们改变全球资源定位器(Uniform Resource Locator)它不允许我们重新加载页面（重新加载页面).当我们需要改变统一资源定位器且重新加载页面或者跳转到其他页面时，我们需要使用低级点得API，$window.location.href。

2.在范围生命周期之外使用$位置

$位置知道有角的的范围生命周期。当浏览器的统一资源定位器发生改变时，它会更新$位置，并且调用$apply，所以所有$观察者和$观察者都会得到通知。当我们再$摘要阶段中修改$位置，不会出现任何问题；$位置会将这次修改传播到浏览器中，并且通知所有$观察者，$观察者。当我们需要在有角的外面改变$位置时（例如在数字正射影像图事件中或者在测试中),我们必须调用$apply，以传播这个变化。

3.$location.path()和！或/前缀

小路可以直接使用"/"开始；$location.path()setter会在价值没有以"/"开头时自动补上。

注意"!"前缀，在哈斯邦模式中，不属于$location.path()的一部分。它仅仅是hashPrefix。

六、使用$位置服务进行测试

在测试中使用$位置服务的时候，是处于角镜寿命周期外面的。这意味着我们需要负责调用scope.apply()。

描述(' serviceUnderTest '，function(){在每个()模块之前(function($ provide){ $ provide。工厂('测试中的服务'，功能($location){ //不管它做什么.});});它('应该.'，注入(函数($location，$rootScope，测试中的服务){ $ location。路径('/new/path ')；$rootScope .$ apply()；//测试服务应该做什么.}));});七、从早期的AngularJS版本迁移而来

在早期的有角的中，$位置使用哈希路径或者hashssearch去处理小路和搜索方法。在这个释放；排放；发布中，当有需要的时候，$位置服务处理小路和搜索方法，然后使用那些获得得信息去构成哈斯邦网址（例如http://server.com/#!/path？搜索引擎。

八、双向绑定到$位置

角度编译器当前不支持方法的双向绑定(https://github。com/angular/angular。js/issues/404)。如果我们希望对$位置对象实现双向绑定（在投入中使用ngModel指令),我们需要指定一个额外的模型属性（例如：locationPath)，并加入两个$手表，监听两个方向上的$位置更新，例如：

输入类型=' text ' ng-model=' location path '/

//js-controller $作用域$watch('locationPath '，函数(路径){ $ location。路径(path)；);$scope .$watch('$location.path()'，函数（路径){ scope . location path=path })；以上就是关于使用$位置的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！