@@ -361,10 +361,10 @@ redirect to regular / hashbang url, as this conversion happens only during parsi
361361In these examples we use `<base href="/base/index.html" />`
362362
363363#### Browser in HTML5 mode
364- <example module="html5-mode">
364+ <example module="html5-mode" name="location-html5-mode" >
365365 <file name="index.html">
366366 <div ng-controller="LocationController">
367- <div ng-address-bar browser="html5" ></div><br><br>
367+ <div ng-address-bar></div><br><br>
368368 <div>
369369 $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>
370370 $location.host() = <span ng-bind="$location.host()"></span> <br>
@@ -380,93 +380,93 @@ In these examples we use `<base href="/base/index.html" />`
380380 </div>
381381 </div>
382382 </file>
383- <file name="script.js">
383+ <file name="app.js">
384+ angular.module('html5-mode', ['fake-browser', 'address-bar'])
385+
386+ .constant('initUrl', 'http://www.example.com/base/path?a=b#h')
387+ .constant('baseHref', '/base/index.html')
388+ .value('$sniffer', { history: true })
389+
390+ .controller("LocationController", function($scope, $location) {
391+ $scope.$location = {};
392+ angular.forEach("protocol host port path search hash".split(" "), function(method){
393+ $scope.$location[method] = function(){
394+ var result = $location[method].call($location);
395+ return angular.isObject(result) ? angular.toJson(result) : result;
396+ };
397+ });
398+ })
399+
400+ .config(function($locationProvider) {
401+ $locationProvider.html5Mode(true).hashPrefix('!');
402+ })
403+
404+ .run(function($rootElement) {
405+ $rootElement.on('click', function(e) { e.stopPropagation(); });
406+ });
407+ </file>
408+
409+ <file name="fakeBrowser.js">
384410 angular.module('fake-browser', [])
385411
386- .factory('FakeBrowser', function() {
387- return function FakeBrowser(initUrl, baseHref) {
388- this.onUrlChange = function(fn) {
412+ .config(function($provide) {
413+ $provide.decorator('$browser', function($delegate, baseHref, initUrl) {
414+
415+ $delegate.onUrlChange = function(fn) {
389416 this.urlChange = fn;
390417 };
391418
392- this .url = function() {
419+ $delegate .url = function() {
393420 return initUrl;
394- };
421+ };
395422
396- this .defer = function(fn, delay) {
423+ $delegate .defer = function(fn, delay) {
397424 setTimeout(function() { fn(); }, delay || 0);
398425 };
399426
400- this .baseHref = function() {
427+ $delegate .baseHref = function() {
401428 return baseHref;
402429 };
403430
404- this.notifyWhenOutstandingRequests = angular.noop;
405- };
406- });
407-
408- angular.module('html5-mode', ['fake-browser'])
409-
410- .factory('$browser', function(FakeBrowser) {
411- return new FakeBrowser('http://www.example.com/base/path?a=b#h', '/base/index.html');
412- })
413-
414- .value('$sniffer', { history: true })
415-
416- .controller("LocationController", function($scope, $location) {
417- $scope.$location = {};
418- angular.forEach("protocol host port path search hash".split(" "), function(method){
419- $scope.$location[method] = function(){
420- var result = $location[method].call($location);
421- return angular.isObject(result) ? angular.toJson(result) : result;
422- };
431+ return $delegate;
423432 });
424- })
433+ });
434+ </file>
425435
436+ <file name="addressBar.js">
437+ angular.module('address-bar', [])
426438 .directive('ngAddressBar', function($browser, $timeout) {
427439 return {
428440 template: 'Address: <input id="addressBar" type="text" style="width: 400px" >',
429441 link: function(scope, element, attrs){
430442 var input = element.children("input"), delay;
431-
443+
432444 input.on('keypress keyup keydown', function(event) {
433445 delay = (!delay ? $timeout(fireUrlChange, 250) : null);
434446 event.stopPropagation();
435447 })
436448 .val($browser.url());
437-
449+
438450 $browser.url = function(url) {
439451 return url ? input.val(url) : input.val();
440- };
452+ };
441453
442454 function fireUrlChange() {
443455 delay = null;
444456 $browser.urlChange(input.val());
445457 }
446458 }
447459 };
448- })
449-
450- .config(function($locationProvider) {
451- $locationProvider.html5Mode(true).hashPrefix('!');
452- })
453-
454- .run(function($rootElement) {
455- $rootElement.on('click', function(e) {
456- e.stopPropagation();
457- });
458- });
459-
460+ });
460461 </file>
461462
462463 <file name="protractor.js" type="protractor">
463464
464465 var addressBar = element(by.css("#addressBar")),
465- url = 'http://www.example.com/base/path?a=b#h';
466+ url = 'http://www.example.com/base/path?a=b#h';
467+
466468
467-
468469 it("should show fake browser info on load", function(){
469- browser.ignoreSynchronization = true;
470470 expect(addressBar.getAttribute('value')).toBe(url);
471471
472472 expect(element(by.binding('$location.protocol')).getText()).toBe('http');
@@ -476,11 +476,9 @@ In these examples we use `<base href="/base/index.html" />`
476476 expect(element(by.binding('$location.search')).getText()).toBe('{"a":"b"}');
477477 expect(element(by.binding('$location.hash')).getText()).toBe('h');
478478
479- browser.ignoreSynchronization = false;
480479 });
481480
482481 it("should change $location accordingly", function(){
483- browser.ignoreSynchronization = true;
484482 var navigation = element.all(by.css("#navigation a"));
485483
486484 navigation.get(0).click();
@@ -505,18 +503,17 @@ In these examples we use `<base href="/base/index.html" />`
505503 expect(element(by.binding('$location.path')).getText()).toBe('/sec/ond');
506504 expect(element(by.binding('$location.search')).getText()).toBe('{"flag":true}');
507505 expect(element(by.binding('$location.hash')).getText()).toBe('hash');
508- browser.ignoreSynchronization = false;
509506 });
510507
511508 </file>
512509
513510</example>
514511
515512####Browser in HTML5 Fallback mode (Hashbang mode)
516- <example module="html5 -mode">
513+ <example module="hashbang-mode" name="location-hashbang -mode">
517514 <file name="index.html">
518515 <div ng-controller="LocationController">
519- <div ng-address-bar browser="html5" ></div><br><br>
516+ <div ng-address-bar></div><br><br>
520517 <div>
521518 $location.protocol() = <span ng-bind="$location.protocol()"></span> <br>
522519 $location.host() = <span ng-bind="$location.host()"></span> <br>
@@ -532,93 +529,96 @@ In these examples we use `<base href="/base/index.html" />`
532529 </div>
533530 </div>
534531 </file>
535- <file name="script.js">
536- angular.module('fake-browser', [])
537-
538- .factory('FakeBrowser', function() {
539- return function FakeBrowser(initUrl, baseHref) {
540- this.onUrlChange = function(fn) {
541- this.urlChange = fn;
542- };
532+ <file name="app.js">
533+ angular.module('hashbang-mode', ['fake-browser', 'address-bar'])
543534
544- this.url = function() {
545- return initUrl;
546- };
547-
548- this.defer = function(fn, delay) {
549- setTimeout(function() { fn(); }, delay || 0);
550- };
551-
552- this.baseHref = function() {
553- return baseHref;
554- };
555-
556- this.notifyWhenOutstandingRequests = angular.noop;
557- };
558- });
559-
560- angular.module('html5-mode', ['fake-browser'])
535+ .constant('initUrl', 'http://www.example.com/base/index.html#!/path?a=b#h')
536+ .constant('baseHref', '/base/index.html')
537+ .value('$sniffer', { history: false })
561538
562- .factory('$browser', function(FakeBrowser ) {
563- return new FakeBrowser('http://www.example.com/base/index.html#!/path?a=b#h', '/base/index.html ');
539+ .config( function($locationProvider ) {
540+ $locationProvider.html5Mode(true).hashPrefix('! ');
564541 })
565542
566- .value('$sniffer', { history: false })
567-
568543 .controller("LocationController", function($scope, $location) {
569544 $scope.$location = {};
570- angular.forEach("protocol host port path search hash".split(" "), function(method){
545+ angular.forEach("protocol host port path search hash".split(" "), function(method){
571546 $scope.$location[method] = function(){
572547 var result = $location[method].call($location);
573548 return angular.isObject(result) ? angular.toJson(result) : result;
574549 };
575550 });
576551 })
577552
578- .directive('ngAddressBar', function($browser) {
553+ .run(function($rootElement) {
554+ $rootElement.on('click', function(e) {
555+ e.stopPropagation();
556+ });
557+ });
558+
559+ </file>
560+
561+ <file name="fakeBrowser.js">
562+ angular.module('fake-browser', [])
563+
564+ .config(function($provide) {
565+ $provide.decorator('$browser', function($delegate, baseHref, initUrl) {
566+
567+ $delegate.onUrlChange = function(fn) {
568+ this.urlChange = fn;
569+ };
570+
571+ $delegate.url = function() {
572+ return initUrl;
573+ };
574+
575+ $delegate.defer = function(fn, delay) {
576+ setTimeout(function() { fn(); }, delay || 0);
577+ };
578+
579+ $delegate.baseHref = function() {
580+ return baseHref;
581+ };
582+
583+ return $delegate;
584+ });
585+ });
586+ </file>
587+
588+
589+ <file name="addressBar.js">
590+ angular.module('address-bar', [])
591+ .directive('ngAddressBar', function($browser, $timeout) {
579592 return {
580593 template: 'Address: <input id="addressBar" type="text" style="width: 400px" >',
581594 link: function(scope, element, attrs){
582595 var input = element.children("input"), delay;
583-
596+
584597 input.on('keypress keyup keydown', function(event) {
585598 delay = (!delay ? $timeout(fireUrlChange, 250) : null);
586599 event.stopPropagation();
587600 })
588601 .val($browser.url());
589-
602+
590603 $browser.url = function(url) {
591604 return url ? input.val(url) : input.val();
592- };
605+ };
593606
594607 function fireUrlChange() {
595608 delay = null;
596609 $browser.urlChange(input.val());
597610 }
598611 }
599612 };
600- })
601-
602- .config(function($locationProvider) {
603- $locationProvider.html5Mode(true).hashPrefix('!');
604- })
605-
606- .run(function($rootElement) {
607- $rootElement.on('click', function(e) {
608- e.stopPropagation();
609- });
610613 });
611-
612614 </file>
613615
614616 <file name="protractor.js" type="protractor">
615- //browser.ignoreSynchronization = true;
616-
617+
617618 var addressBar = element(by.css("#addressBar")),
618619 url = 'http://www.example.com/base/index.html#!/path?a=b#h';
619-
620+
620621 it("should show fake browser info on load", function(){
621- browser.ignoreSynchronization = true;
622622 expect(addressBar.getAttribute('value')).toBe(url);
623623
624624 expect(element(by.binding('$location.protocol')).getText()).toBe('http');
@@ -628,11 +628,9 @@ In these examples we use `<base href="/base/index.html" />`
628628 expect(element(by.binding('$location.search')).getText()).toBe('{"a":"b"}');
629629 expect(element(by.binding('$location.hash')).getText()).toBe('h');
630630
631- browser.ignoreSynchronization = false;
632631 });
633632
634633 it("should change $location accordingly", function(){
635- browser.ignoreSynchronization = true;
636634 var navigation = element.all(by.css("#navigation a"));
637635
638636 navigation.get(0).click();
@@ -658,7 +656,6 @@ In these examples we use `<base href="/base/index.html" />`
658656 expect(element(by.binding('$location.search')).getText()).toBe('{"flag":true}');
659657 expect(element(by.binding('$location.hash')).getText()).toBe('hash');
660658
661- browser.ignoreSynchronization = false;
662659 });
663660 </file>
664661
0 commit comments