杰晶网络

AngularJs  Using $location详解及示例代码
网络编程 2024/11/16 佚名
3 2

一、What does it do"htmlcode"> 

 // get the current path
  $location.path();

  // change the path
  $location.path('/newValue')

　　所有setter方法都返回同一个$location对象，以实现链式语法。例如，在一句里面修改多个属性，链式setter方法类似：

　　$location.path(‘/newValue').search({key:value});

　　有一个特别的replace方法，可以用作告诉$location服务，在下一次与浏览器同步时，使用某个路径代替最新的历史记录，而不是创建一个新的历史记录。当我们想实现重定向（redirection）而又不想使后退按钮（后退按钮回重新触发重定向）失效时，replace方法就很有用了。想改变当前URL而不创建新的历史记录的话，我们可以这样做：

          $location.path(‘/someNewPath').replace();

　　注意，setter方法不会马上更新window.location。相反，$location服务会知道scope生命周期以及合并多个$location变化为一个，并在scope的$digest阶段一并提交到window.location对象中。正因为$location多个状态的变化会合并为一个变化，到浏览器中，只调用一次replace()方法，让整个commit只有一个replace()，这样不会使浏览器创建额外的历史记录。一旦浏览器更新了，$location服务会通过replace()方法重置标志位，将来的变化将会创建一个新的历史记录，除非replace()被再次调用。

           Setter and character encoding

　　我们可以传入特殊字符到$location服务中，服务会按照RFC3986标准，自动对它们进行编码。当我们访问这些方法时：

  1. 所有传入$location的setter方法的值，path()、search()、hash()，都会被编码。
  2. getter方法（没参数）返回的值都是经过解码的，如path()，search()，hash()。
  3. 当我们调用absUrl()方法时，返回的值是包含已编码部分的完整url。
  4. 当我们调用url()方法时，返回的是包含path、search和hash部分的已经编码的url，如/path"theimg" src="/UploadFiles/2021-04-02/201692144221214.jpg">

     AngularJs  Using $location详解及示例代码

    1. Hashbang mode (default mode)

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

    it('should show example', inject(
  function($locationProvider) {
    $locationProvider.html5mode = false;
    $locationProvider.hashPrefix = '!';
  },
  function($location) {
  // open 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"color: #0000ff">                <meta name="fragment" content="!" />
    

    

    　　这样做，将让爬虫机器人使用_escaped_fragment_参数请求当前的链接，让我们的服务器认识爬虫机器人，并提供对应的HTML快照。想了解更多关于这个技术的信息，可以查看https://developers.google.com/webmasters/ajax-crawling/docs/specification"/ext/link" target="_self">link</a>
    

    

    到不同domain的绝对链接：<a href="http://angularjs.org/">link</a>
    

    

    设置了base路径后，通过” /”开头的链接到不同base路径的超链接：<a href="/not-my-base/link">link</a>
    

    

    3. server side
    

    　　使用这个方式，在服务端请求URL重定向，通常，我们需要重定向我们所有的链接到我们的应用中。（例如index.html）。
    

    4. Crawling your app
    

    　　与之前相同
    

    5. Relative links
    

    　　确保检查所有相对链接、图片、脚本等。我们必须在<head>中指定base url（<base href="/my-base">），并在所有地方使用绝对url（以/开头）。因为相对URL会根据document的初始路径（通常与应用的root有所不同），转化为绝对url。（relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application）。
    

    　　我们十分鼓励在document root中运行允许使用History API的angular应用，因为这很好地照顾到相对链接的问题。
    

    6. Sending links among different browsers
    

    　　（这里讲解了两种模式的地址可以适应不同浏览器，自动转换，又重复讲一次……）
    

    7. 例子
    

    　　在这例子中，可以看到两个$location实例，两个都是html5 mode，但在不同的浏览器上，所以我们可以看到两者之间的不同点。这些$location服务与两个假的“浏览器”连接。每一个input代表浏览器的地址栏。
    

    　　注意，当我们输入hashbang地址到第一个“浏览器”（或者第二个？），它不会重写或重定向另外的Url，这个转换过程只会发生在page reload的时候。
    

    


    

    <!DOCTYPE html>
<html ng-app>
<head>
  <base href=""/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>fake-browser</title>
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<div ng-non-bindable class="html5-hashbang-example">
  <div id="html5-mode" ng-controller="Html5Cntl">
    <h4>Browser with History API</h4>
    <div ng-address-bar browser="html5"></div><br><br>
    $location.protocol() = {{$location.protocol()}}<br>
    $location.host() = {{$location.host()}}<br>
    $location.port() = {{$location.port()}}<br>
    $location.path() = {{$location.path()}}<br>
    $location.search() = {{$location.search()}}<br>
    $location.hash() = {{$location.hash()}}<br>
    <a href="http://www.host.com/base/first">/base/first"http://www.host.com/base/sec/ond">sec/ond"/other-base/another">external</a>
  </div>
  <div id="hashbang-mode" ng-controller="HashbangCntl">
    <h4>Browser without History API</h4>
    <div ng-address-bar browser="hashbang"></div><br><br>
    $location.protocol() = {{$location.protocol()}}<br>
    $location.host() = {{$location.host()}}<br>
    $location.port() = {{$location.port()}}<br>
    $location.path() = {{$location.path()}}<br>
    $location.search() = {{$location.search()}}<br>
    $location.hash() = {{$location.hash()}}<br>
    <a href="http://www.host.com/base/first">/base/first"http://www.host.com/base/sec/ond">sec/ond"/other-base/another">external</a>
  </div>
</div>
<script src="/UploadFiles/2021-04-02/angular.js">
    

    


    五、附加说明
    

    1. Page reload navigation
    

    　　$location服务仅仅允许我们改变URl；它不允许我们重新加载页面（reload the page）。当我们需要改变URL且reload page或者跳转到其他页面时，我们需要使用低级点得API，$window.location.href。
    

    2. Using $location outside of the scope life-cycle
    

    　　$location知道angular的scope life-cycle。当浏览器的URL发生改变时，它会更新$location，并且调用$apply，所以所有$watcher和$observer都会得到通知。当我们再$digest阶段中修改$location，不会出现任何问题；$location会将这次修改传播到浏览器中，并且通知所有$watcher、$observer。当我们需要在angular外面改变$location时（例如在DOM事件中或者在测试中），我们必须调用$apply，以传播这个变化。
    

    3. $location.path() and ! or / prefixes
    

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

    　　注意”!”前缀，在Hashbang mode中，不属于$location.path()的一部分。它仅仅是hashPrefix。
    

    六、Testing with the $location service
    

    　　在测试中使用$location服务的时候，是处于angular scope life-cycle外面的。这意味着我们需要负责调用scope.apply()。  
    

    


    

    describe('serviceUnderTest', function() {
  beforeEach(module(function($provide) {
  　　$provide.factory('serviceUnderTest', function($location){
  　　// whatever it does...
  　　});
  });
  it('should...', inject(function($location, $rootScope, serviceUnderTest) {
  　　$location.path('/new/path');
  　　$rootScope.$apply();
  　　// test whatever the service should do...
  }));
});

    

    
 

    七、Migrating from earlier AngularJS releases
    

    　　在早期的angular中，$location使用hashPath或者hashSearch去处理path和search方法。在这个release中，当有需要的时候，$location服务处理path和search方法，然后使用那些获得得信息去构成hashbang URL（例如http://server.com/#!/path"text" ng-model="locationPath" />
    

    


    

    // js - controller
$scope.$watch('locationPath', function(path) {
  $location.path(path);
);
$scope.$watch('$location.path()', function(path) {
  scope.locationPath = path;
});

    

    


    以上就是关于AngularJs Using $location的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
标签：
AngularJs,Using,$location,AngularJs,Using,$location,详解
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“AngularJs  Using $location详解及示例代码”
暂无“AngularJs  Using $location详解及示例代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网