Inject AngularJS 1.2 $location service into controller not working in PhoneGap 3.0

Question

In a Windows Phone 7.1 emulator with PhoneGap 3.0 and AngularJS 1.2, why does this not work:

angulargap.controller('HomeController', ['$scope', '$routeParams', '$location',
function ($scope, $routeParams, $location) {
    $scope.$routeParams = $routeParams;
    $scope.$location = $location;
    $scope.message = "AngularJS!";
}]);

Error message:

ERROR:Error: [$injector:cdep] Circular dependency found: 
http://errors.angularjs.org/1.2.0-rc.2/$injector/cdep?p0=

While this works:

angulargap.controller('HomeController', ['$scope', '$routeParams',
function ($scope, $routeParams) {
    $scope.$routeParams = $routeParams;
    $scope.message = "AngularJS!";
}]);

What is going wrong with injecting the $location service in this specific scenario? All works great in Chrome and Internet Explorer in a desktop browser. But it does not work in the Windows Phone 7 device emulator, nor on the physical device itself.

I wonder if it has to do with your injection of $location into $scope. Could you try removing `$scope.$location = $location` and see if you still have the problem? So we can isolate the issue. — KayakDave, Oct 13 '13 at 21:55
Hi @KayakDave, the issue is the same after removing that line. That specific piece of code is from an example that works great in the browser. — kroonwijk, Oct 13 '13 at 22:22
Interesting problem. In case you haven't seen, here's details on your error: http://docs.angularjs.org/error/$injector:cdep The next thing I'd be tempted to try is to put this all inside a module in order to control the scope more tightly. But that's just me guessing. — KayakDave, Oct 13 '13 at 22:33
I see you are using a module- oops. But I have another idea- how about renaming your function parameter $location to something else. Keep your first '$location' after the square brackets as is. But change the second one to something like "renamed$location" and use the renamed version within your code. This should keep minification working but might address the injector trying to inject $location in twice. But it's just a theory. — KayakDave, Oct 13 '13 at 23:23

score 3 · Accepted Answer · answered Oct 14 '13 at 21:53

Got it guys ... There is a substantial amount of issues for the AngularJS/PhoneGap/WindowsPhone combination. This one was solved by https://github.com/angular/angular.js/issues/2303?source=cc#issuecomment-20770025.

Essentially, because windows phone uses a weird protocol prefix with a single forward slash (x-wmapp0:/), the $location initializer goes nuts and that triggers an error which seamingly exposes itself in this weird error message, completely unrelated to the error :-(

I'm about to propose a pull-request on this fix to the AngularJS repo on GitHub.

Inject AngularJS 1.2 $location service into controller not working in PhoneGap 3.0

1 Answers1