AngularJs 用 $location 设置和判断在哪个页面

时间：2014-11-21 09:12:53 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：angularjs 浏览器 browser 跳转 url路径

之前有个判断在那个页面上的问题困扰了我很久~后来查了很久的文档才找到的$location这个注入的Service,和大家分享下拉~省的你们找啦~

当然可以用window.location来达到同样的目的。

我是不是棒棒哒?~

前方高能。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

这是AngularJS 介绍$location的网址啦（想阅读先翻墙）：https://docs.angularjs.org/guide/$location

言归正传。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

直接看官网的例子吧

1>首先：这是Getter and setter 方法的使用。

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

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

也可以变形使用啦~

//Change multiple segments in one go, chain setters like this:

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

2>Replace method(中文可能翻译成替代方法)

即，把原来的位置替换成别的

$location.path('/someNewPath');
$location.replace();
// or you can chain these as: $location.path('/someNewPath').replace();

3>对比window.location(必须有图有真相是吧，上图)
bubuko.com,布布扣

。。。。我懒得翻译了术语太多。。总之功能很强就对了。

4>什么时候需要用到$location呐？

Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.

（任何时间当你的应用在现在的URL上需要改变和跳转的时候，或者你需要改变现在浏览器中的URL时候-----TnT，英语烂请见谅）

5>还有一个特性一定要介绍（上图）

bubuko.com,布布扣

这个。。。我暂时也不太懂，欢迎看了这篇文章而且懂的人来给我解答啦~ bubuko.com,布布扣（此处应该有掌声~）

6>最后的最后一定是小例子啦~加深一下记忆吧~

Browser in HTML5 Fallback mode (Hashbang mode)

(1)index.html

<div ng-controller="LocationController">
  <div ng-address-bar></div><br><br>
  <div>
    $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>
    $location.host() = <span ng-bind="$location.host()"></span> <br>
    $location.port() = <span ng-bind="$location.port()"></span> <br>
    $location.path() = <span ng-bind="$location.path()"></span> <br>
    $location.search() = <span ng-bind="$location.search()"></span> <br>
    $location.hash() = <span ng-bind="$location.hash()"></span> <br>
  </div>
  <div id="navigation">
    <a href="http://www.example.com/base/first?a=b">/base/first?a=b</a> |
    <a href="http://www.example.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
    <a href="/other-base/another?search">external</a>
  </div>
</div>

(2)app.js

angular.module('hashbang-mode', ['fake-browser', 'address-bar'])

.constant('initUrl', 'http://www.example.com/base/index.html#!/path?a=b#h')
.constant('baseHref', '/base/index.html')
.value('$sniffer', { history: false })

.config(function($locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
})

.controller("LocationController", function($scope, $location) {
  $scope.$location = {};
  angular.forEach("protocol host port path search hash".split(" "), function(method){
    $scope.$location[method] = function(){
      var result = $location[method].call($location);
      return angular.isObject(result) ? angular.toJson(result) : result;
    };
  });
})

.run(function($rootElement) {
  $rootElement.on('click', function(e) {
    e.stopPropagation();
  });
});

(3)FakeBrowser.js

angular.module('fake-browser', [])

.config(function($provide) {
 $provide.decorator('$browser', function($delegate, baseHref, initUrl) {

  $delegate.onUrlChange = function(fn) {
     this.urlChange = fn;
   };

  $delegate.url = function() {
     return initUrl;
  };

  $delegate.defer = function(fn, delay) {
     setTimeout(function() { fn(); }, delay || 0);
   };

  $delegate.baseHref = function() {
     return baseHref;
   };

   return $delegate;
 });
});

(4)addressBar.js

angular.module('address-bar', [])
.directive('ngAddressBar', function($browser, $timeout) {
   return {
     template: 'Address: <input id="addressBar" type="text" style="width: 400px" >',
     link: function(scope, element, attrs){
       var input = element.children("input"), delay;

       input.on('keypress keyup keydown', function(event) {
               delay = (!delay ? $timeout(fireUrlChange, 250) : null);
               event.stopPropagation();
             })
            .val($browser.url());

       $browser.url = function(url) {
         return url ? input.val(url) : input.val();
       };

       function fireUrlChange() {
         delay = null;
         $browser.urlChange(input.val());
       }
     }
   };
 });

(5)protractor.js(测试JS)

it("should show fake browser info on load", function(){
  expect(addressBar.getAttribute('value')).toBe(url);

  expect(element(by.binding('$location.protocol()')).getText()).toBe('http');
  expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');
  expect(element(by.binding('$location.port()')).getText()).toBe('80');
  expect(element(by.binding('$location.path()')).getText()).toBe('/path');
  expect(element(by.binding('$location.search()')).getText()).toBe('{"a":"b"}');
  expect(element(by.binding('$location.hash()')).getText()).toBe('h');

});

it("should change $location accordingly", function(){
  var navigation = element.all(by.css("#navigation a"));

  navigation.get(0).click();

  expect(addressBar.getAttribute('value')).toBe("http://www.example.com/base/index.html#!/first?a=b");

  expect(element(by.binding('$location.protocol()')).getText()).toBe('http');
  expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');
  expect(element(by.binding('$location.port()')).getText()).toBe('80');
  expect(element(by.binding('$location.path()')).getText()).toBe('/first');
  expect(element(by.binding('$location.search()')).getText()).toBe('{"a":"b"}');
  expect(element(by.binding('$location.hash()')).getText()).toBe('');


  navigation.get(1).click();

  expect(addressBar.getAttribute('value')).toBe("http://www.example.com/base/index.html#!/sec/ond?flag#hash");

  expect(element(by.binding('$location.protocol()')).getText()).toBe('http');
  expect(element(by.binding('$location.host()')).getText()).toBe('www.example.com');
  expect(element(by.binding('$location.port()')).getText()).toBe('80');
  expect(element(by.binding('$location.path()')).getText()).toBe('/sec/ond');
  expect(element(by.binding('$location.search()')).getText()).toBe('{"flag":true}');
  expect(element(by.binding('$location.hash()')).getText()).toBe('hash');

});

(6)效果图一定要有的咯~

a.点击第一个链接

bubuko.com,布布扣