Skip to content

Instantly share code, notes, and snippets.

@vojtajina

vojtajina/angular-two-locations.html

Created July 20, 2011 20:31
Show Gist options
  • Save vojtajina/1095852 to your computer and use it in GitHub Desktop.
Save vojtajina/1095852 to your computer and use it in GitHub Desktop.
Download ZIP
Angular - two different $locations on single page
Raw
angular-two-locations.html
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
<title>NG playground</title>
<script src="/build/angular.js"></script>
<style>
div {margin: 5px; padding: 0 10px 10px 10px; border: 1px solid black;}
input {width: 400px;}
</style>
</head>
<body>
<div id="html5-mode" ng:controller="Html5Cntl">
<h2>Html5 Mode</h2>
<ng:address-bar browser="html5"></ng:address-bar><br />
&lt;base href="{{baseHref}}" /&gt;<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="/base/first?a=b">link</a> | <a href="sec/ond?flag#hash">link</a> | <a href="/base/another?search" ng:ext-link>ext</a>
</div>
<div id="hashbang-mode" ng:controller="HashbangCntl">
<h2>Hashbang Mode</h2>
<ng:address-bar browser="hashbang"></ng:address-bar><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 />
</div>
</body>
</html>
Raw
angular-two-locations.js
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.hover = angular.noop;
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')
};
angular.element(window).bind('load', function() {
function initEnv(name) {
var root = angular.element(document.getElementById(name + '-mode'));
var scope = angular.scope(null, {$config: {html5Mode: name == 'html5', hashPrefix: '!'}, $browser: browsers[name], $jqRootElement: root});
angular.compile(root)(scope).$apply();
}
// html5
initEnv('html5');
initEnv('hashbang');
});
function Html5Cntl($location, $browser) {
this.$location = $location;
this.baseHref = $browser.baseHref();
l1 = $location;
}
function HashbangCntl($location) {
this.$location = $location;
l2 = $location;
}
angular.widget('ng:address-bar', function(tpl) {
return function(elm) {
var browser = browsers[elm.attr('browser')],
input = angular.element('<input type="text" />').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());
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment