230问答网 > AngularJs 用 location 设置和判断在哪个页面

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

2025-02-11 14:33:02

推荐回答（2个）

回答1：

直接看官网的例子吧

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(必须有图有真相是吧，上图)

。。。。我懒得翻译了术语太多。。总之功能很强就对了。
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>还有一个特性一定要介绍（上图）

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

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

Browser in HTML5 Fallback mode (Hashbang mode)

(1)index.html

$location.protocol() =

$location.host() =

$location.port() =

$location.path() =

$location.search() =

$location.hash() =

(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: ',
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');

});

回答2：

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(必须有图有真相是吧，上图)

。。。。我懒得翻译了术语太多。。总之功能很强就对了。
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.

最新问答

我有一张招商银行的信用卡，再办一张怎么办

老师打了我，我顶撞了老师，后来老师让我写检讨书当着全班同学的面念，我该怎么办？

属鼠的人五行中用含什么的字起名好

怎么看个股对大盘的贡献度？用通达信

求560到580之间中国较好大学

我的win8笔记本电脑特不好用，麻烦大家帮我看看我的配置，尤其是显卡，是不是因为显卡不行导致运行不

科鲁兹改装成这样要多少钱，要专业的

本人只是想从船舶型线图型值表里提取坐标建模，哪有船舶型线图视频？我是机械专业的

常吃小米对身体有什么好处呢？常吃小米对身体?

诗人贾岛被称作什么？