Corner routing does not work properly in PhoneGap

Question

I hit my head against the wall, trying to understand why angularJS routing does not work on the phone for me. I have all the files installed correctly, and I am not getting any errors. I am trying to change the url using the $ location.url service directly from angular. Therefore, when you click on a div, the controller will have $ location.url ("profile") and nothing will happen. I tried the solution found in this https://stackoverflow.com/a/166269/2126 , but this does not work for me. Am I doing something wrong, or is there a better way to approach this? Below is the routing I set

var app = angular.module("App", ["hmTouchevents"]) .config(function($routeProvider) { $routeProvider .when("/index.html", { templateUrl: "/views/login.html", controller: "loginCtlr" }) .when("/landing", { templateUrl: "/views/landing.html", controller: "landingCtlr" }) .when("/single-view/:id", { templateUrl: "/views/single-view.html", controller: "singleViewCtlr" }) .when("/restaurant", { templateUrl: "/views/restaurant-info.html", controller: "restaurantCtlr" }) .when("/profile/:id", { templateUrl: "/views/profile.html", controller: "profileCtlr" }) .when("/lists/:list", { templateUrl: "/views/lists.html", controller: "listsCtlr" }) .when("/follow/:type", { templateUrl: "/views/follow.html", controller: "followCtlr" }); }); 

Sampling Controller:

 app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){ $scope.goTo("profile"); }]); 

As always, any help is greatly appreciated.

Answer 1

I had a problem similar to this one today. The main problem here is that PhoneGap does not have a built-in web server. If you are developing locally, you are probably using a web server, so you can do something like: http://localhost/#/profile , and routing will work.

However, PhoneGap downloads your code from file:// URL, not http:// . If you do $location.url("profile") , you replace the entire URL of the entire file://profile , which does not exist. Same thing if you use a link like this: <a href="/#/profile">My Profile</a>

The solution is to somehow make your links point to the right place. If you use $location.url() , you can specify its path to the file: $location.url( window.location + "#/profile" )

If you just create a link, you can go away with removing the leading slash to make it a relative URL: <a href="/#/profile">My Profile</a> becomes <a href="#/profile">My Profile</a>

Answer 2

Had the same problem ... I could easily fix this by adding the following code to the header of my index.html file.

 <base href="/android_asset/www/" /> 

Hope this helps.

Answer 3

in your controller try ...

 $location.path('/profile'); 

Answer 4

After much rework, this is what worked for me!

If you can use $ location.path () in the controller, it should work as expected, but if you need to use href-style links, you can create links on the angular "base" page (for example, main.html):

<a href="main.html#/profile">Link To Profile</a>