tbosch
commented
11 years ago Well, the right version is the 1.2.0, which I released just before christmas. However, the error also exists in 1.2.0, I just checked with the Android Emulator.
Why this strange hash in the url after navigation?
This is the default way of angular representing an url with $locationProvider.html5Mode(true) if the browser does not support the history api (like the browser in android 2.3). See here http://docs.angularjs.org/guide/dev_guide.services.$location for details. The only problem here is the %23 in the path. This should be a #. So the new url should be .../en#!/en#bar instead of .../en#!/en%23bar.
What the adapter further does is:
- set a base tag with a href equal to
location.href(this is actually done by jquery mobile). - set
$locationProvider.hashPrefix('!'), which is why there is the!in the url.
This seems to be an angular bug. Try this snippet, which only uses angular and also shows this problem:
<!DOCTYPE html>
<html ng-app="amovens">
<head>
<base>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" type="text/javascript"></script>
<script>
var baseTag = document.getElementsByTagName("base")[0];
baseTag.setAttribute("href", location.href);
var module = angular.module("amovens", []);
module.config(['$provide', function ($provide) {
$provide.decorator("$sniffer", ['$delegate', function ($sniffer) {
$sniffer.history = false;
return $sniffer;
}]);
}]);
module.config(function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix("!");
});
module.controller("TestCtrl", function($scope, $location, $browser) {
console.log($browser.baseHref());
$scope.showAngularHash = function() {
alert("Parsed hash by angular (should be 'someHash'): "+$location.hash());
}
});
</script>
</head>
<body ng-controller="TestCtrl">
<a href="#someHash">Set someHash in location</a>
<br>
<button ng-click="showAngularHash()">Show hash read by angular</button>
</body>
</html>First click on the Link "Set someHash in location". After this, have a look at the location in your browser. On Android 2.3, this is something like ...#!/...%23someHash, in e.g. desktop Chrome this is ...#!/...#someHash.
You can check if angular can read this url correctly by clicking on the second Button "Show hash read by angular". This should show an alert box with the hash someHash. This works in desktop Chrome, but not on Android 2.3.
Note: The following code tells angular not to use the history api even if the browser supports it. I use this to that desktop Chrome is more closely to Android 2.3.
module.config(['$provide', function ($provide) {
$provide.decorator("$sniffer", ['$delegate', function ($sniffer) {
$sniffer.history = false;
return $sniffer;
}]);
}]);So, next step would be to search for a corresponding issue in the angular mailing list, or create a new one...
Tobias
jaumeavila
From an email of Jaume Estivill:
Hi Tobias, Sorry for the late response but I have had some crazy days at work. Today I have tried to fix the problem and report the issue as you told me, but I have found some serious issues. It is a complex thing, so let's go by parts.
First of all, the version of the adapter that I am using right now is this one, which is the one you recommend in the jsfiddle template: https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone-1.1.2-SNAPSHOT.js
And I try to load a very simple page (for testing purposes) that is this one:
If you run that page with a browser using Android with version 2.3 (the most common right now due to manufacturer's limitations like Samsung, at least in Spain) and try to go to the second page, the url is converted to a strange one adding some strange characters before the id of the page you want to go and it does not work. For example, I host the page locally in amovens-server.amovens.local/en and when clicking in the BAR link in the page to go to he bar page, the final url is: amovens-server.amovens.local/en#!/en%23bar
However, that does not happen using an Android tablet running version 2.4. And if I run the same page in my Android v2.3 without adding the adapter and using plain jquerymobile and angular it works!
Using only jquery mobile or angular, the URL is not converted. So it has something to do with the angular adapter. Am I using the wrong adapter script? Do you know why it happens? For us it is critical that our webpage can be displayed using Android 2.3.
Thank you very much,
Jaume