大佬教程收集整理的这篇文章主要介绍了AngularJS $location学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
// get the current path
$LOCATIOn.path();
// change the path
$LOCATIOn.path('/newValue')
@H_403_5@ 所有setter方法都返回同一个$LOCATIOn对象，以实现链式语法。例如，在一句里面@L_673_1@多个属性，链式setter方法类似： `
$LOCATIOn.path(‘/newValue’).search({key:value});
$LOCATIOn.path(‘/someNewPath’).replace();@H_403_5@ 注意，setter方法不会马上更新window.LOCATIOn。相反，$LOCATIOn服务会知道scope生命周期以及合并多个$LOCATIOn变化为一个，并在scope的$digest阶段一并提交到window.LOCATIOn对象中。正因为$LOCATIOn多个状态的变化会合并为一个变化，到浏览器中，只调用一次replace()方法，让整个commit只有一个replace()，这样不会使浏览器创建额外的历史记录。一旦浏览器更新了，$LOCATIOn服务会通过replace()方法重置标志位，将来的变化将会创建一个新的历史记录，除非replace()被再次调用。 @H_403_5@Setter and character encoding
@H_403_5@三、Hashbang and HTML5 Modes
@H_403_5@$LOCATIOn服务有两个配置模式，可以控制浏览器地址栏的URL格式：Hashbang mode（默认）与基于使用HTML5 History API的HTML5 mode。在两种模式下，应用都使用相同的API，$LOCATIOn服务会与正确的URL片段、浏览器API一起协作，帮助我们进行浏览器URL变更以及历史管理。
@H_403_5@
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?a=b&c';
$LOCATIOn.path('/new').search('x=y');//可以用字符串的方式更改search，每次设置search，都会覆盖之前的search
$LOCATIOn.absUrl() == 'http://host.com/base/index.html#!/new?x=y';
}
));
@H_403_5@ Crawling your app(让google能够对@R_814_9616@进行索引)
@H_403_5@
这样做，将让爬虫机器人使用escaped_fragment参数请求当前的链接，让我们的服务器认识爬虫机器人，并提供对应的HTML快照。想了解更多关于这个技术的信息，可以查看https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=zh-CN
<!DOCTYPE html> <html ng-app> <head> <base href=""/> <@L_618_64@ http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>fake-browser</title> <@L_618_64@ 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?a=b">/base/first?a=b</a> | <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> | <a href="/other-base/another?search">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?a=b">/base/first?a=b</a> | <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> | <a href="/other-base/another?search">external</a> </div> </div> <script src="../angular.js" type="text/javascript"></script> <script type="text/javascript"> function FakeBrowser(initUrl,baseHref) { this.onUrlChange = function(fn) { this.urlChange = fn; }; this.url = function() { return initUrl; }; this.defer = function(fn,delay) { setTimeout(function() { fn(); },delay || 0); }; this.baseHref = function() { return baseHref; }; this.notifyWhenOutstandingrequests = angular.noop; } var browsers = { html5: new FakeBrowser('http://www.host.com/base/path?a=b#h','/base/index.html'),hashbang: new FakeBrowser('http://www.host.com/base/index.html#!/path?a=b#h','/base/index.html') }; function Html5Cntl($scope,$LOCATIOn) { $scope.$LOCATIOn = $LOCATIOn; } function HashbangCntl($scope,$LOCATIOn) { $scope.$LOCATIOn = $LOCATIOn; } function initEnv(Name) { var root = angular.element(document.getElementById(name + '-mode')); angular.bootstrap(root,[ function ($compileProvider,$LOCATIOnProvider,$providE) { debugger; $LOCATIOnProvider.html5Mode(true).hashPrefix('!'); $provide.value('$browser',browsers[name]); $provide.value('$document',root); $provide.value('$sniffer',{history:name == 'html5'}); $compileProvider.directive('ngAddressBar',function () { return function (scope,elm,attrs) { var browser = browsers[attrs.browser],input = angular.element('<input type="text" style="width:400px;">').val(browser.url()),delay; input.bind('keypress keyup keydown',function () { if (!delay) { delay = setTimeout(fireUrlChange,250); } }); browser.url = function (url) { return input.val(url); }; elm.append('Address: ').append(input); function fireUrlChange() { delay = null; browser.urlChange(input.val()); } }; }); } ]); root.bind('click',function (E) { e.stopPropagation(); }); } initEnv('html5'); initEnv('hashbang'); </script> </body> </html>
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...
}));
});
<input type="text" ng-model="LOCATIOnPath" />
$scope.$watch('LOCATIOnPath',function(path) {
$LOCATIOn.path(path);
);
$scope.$watch('$LOCATIOn.path()',function(path) {
scope.LOCATIOnPath = path;
});
以上是大佬教程为你收集整理的AngularJS $location学习笔记全部内容，希望文章能够帮你解决AngularJS $location学习笔记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。