vojtajina/angular-two-locations.html

## 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>

## 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());
    }
  };
});
	<!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 />
	<base href="{{baseHref}}" /><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>
	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());
	}
	};
	});