Route doesn't detect hash change

[dousylanse]

I am new with angular adapter. I am very excited to make work easily JQM and angular, and would like to thank you for the work you did.

I have something look odd for me, and try to find a answer. Maybe you can help me.

I am making a single page application, and want to pass parameters throught the url.

It seems that the $routeProvider does not detect hash change.

Here is my route definition :

$routeProvider.when('/personn/:id', { templateUrl: 'templates/personn.html', jqmOptions: { transition: 'slide'} })

Without the adapter, a command like this should work : $location.path('personn/101'); It change the url to http://localhost/contextroot/#/personn/101 and $routeProvider inject the template. OK, it's angular, it's nice.

Using the adapter, i have remove the ng-view attribute. The url is now changing to http://localhost/contextroot/personn/101 that is not single page way (and why and different behavior ?)

If I only change the hash ($location.hash('personn/101');) the $routeProvider doesn't catch the change.

My question is : is it possible to make a single page app with the adapter. If yes, how to configure the router ?

Best regards.

[tbosch]

Yes, routing is working well with the adapter. Please note that the adapter enables $locationProvider.html5mode by default, which is why you get urls like http://localhost/contextroot/personn/101. However, that does not reload the page but only changes the url using the html5 history api.

Could you create a jsfiddle (just one index.html with all jqm pages) or a plunk (multiple external jqm pages) with your example? You can find templates here: https://github.com/tigbro/jquery-mobile-angular-adapter#reporting-issues

Thanks, Tobias

[dousylanse]

Thank you for your answer.

Here is a plunker : http://plnkr.co/cs3bjEhwpCjqAuJXvGXe I made 4 tests : two with parameter, and two without. The biggest problem for me is to change page when hash change. The minor one is '/' encoding in '%2F' when clicking the 'click me' label.

I can't see what I am missing.

Be careful to run the plunk in fullscreen before to click the "refresh" button.

Regards, Sylvain

[popcorn245]

I too am getting alot of headaches from hash linking. There is no point in mapping to a url without being able to reload. Also when I call $.mobile.changePage("#test") it changes pages but does not push to history. When I manually run pushState angular digests and craps it's pants. I love this plugin it just needs a little polish work with the urls and it will be GOLD! ^_^

[popcorn245]

Also your wiki has been down. It would really be great to have some documentation. If it wasn't for this issue ticket I wouldn't have even known how the routing works.

[tbosch]

Hi, this is just the normal routing behavior that you are seeing!

Here is your plunk without the adapter, just plain angular, and you can see the same behavior: http://plnkr.co/edit/X93U6sONQ06p6nrhUSTs?p=preview

What I changed (and what the adapter automatically does):

• added a <base> tag with a href attribute of location.href. By this, all routes are relative to your starting document.
• Set locationProvider.html5Mode(true) and $locationProvider.hashPrefix('!').
• Add a <ng-view> to the body (the adapter does something similar, but not a real <ng-view>.

The adapter does this configuration so it's url scheme is the same as when using jquery mobile without angular. E.g. when linking external documents in jqm, you are creating a <a href="somePage.html"> and after clicking, your url is /somePage.html, changed using the HTML5 history api, although that resource does not exist on the server.

For details about angular's routing configuration, have a look in the angular docs, e.g. http://docs.angularjs.org/guide/dev_guide.services.$location

If you don't want the html5 urls and always stick with the hash urls, you can also set $locationProvider.html5Mode(false) in your application...

Note: I also updated the Readme.md of the adapter with the information in this comment.

If you don't have more questions I would close this ticket... Tobias

[johnoscott]

Thanks @tigbro, this helped me. I have wanted "normal" AngularJS routes and URLs to work while I am developing so that a page reload (to see a change in a template for example) doesn't 404. So for anyone else wanting the same, here is what I did :

In my Angular app config:

  var app = angular.module("app", []).config(function($routeProvider,$locationProvider){
    // bring back /# urls by turning OFF html5 paths
    // JQueryMobileAngularAdapter turns in ON by default
    // https://github.com/tigbro/jquery-mobile-angular-adapter/issues/163#issuecomment-16928255
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix("");
    // routes
    $routeProvider
        .when('/home',{templateUrl:'#home'}) // this is the default JQueryMobile view in index.html
        .when('/register',{templateUrl:'register.html'}) // this is a familiar AngularJS route using a partial ...
        .when('/login',{templateUrl:'login.html'}) // ... and so is this
});

In any anchor tag use the normal AngularJS URL scheme e.g. <a href="#/home">Home</a> <a href="#/register">Register</a> <a href="#/login">Login</a>

Interestingly, any link to #route will work, but it redirects to #/route first

[tbosch]

Thanks for your example! Can I close this issue then?

[cesarandreu]

@tigbro, this is probably due to my lack of experience with AngularJS but... I'm making a pretty simple app, and since I was hacking it together I was just calling $.mobile.changePage('#somePage'); directly from my controller (which is a no-no, but I just want it to work, and I plan on tweaking it later). However, that doesn't work properly, because although it changes the page, it doesn't actually update the URL (as mentioned by @popcorn245 ), so you can get into weird scenarios.

Using $location.hash('somePage'); instead of changePage worked perfectly for me. It took me a while of playing around to figure this out. It might be worth mentioning somewhere in the docs something like: If you're gonna be using $.mobile.changePage('#page'); from your controller, that won't update your URL, you'll want to use #location.hash('page');.

[johnoscott]

@tigbro OK for me to close. I suggest adding something to the docs to configure JQMAA to use regular AngularJS links with #/name

[tbosch]

Hi, I updated the Readme with your comments (https://github.com/tigbro/jquery-mobile-angular-adapter#navigation-and-routes, subsection "Notes".)

Thanks for participating! Tobias

[kgathi2]

I am cracking my brains to understand the behavior of the routing. I am using rhomobile and jqm and on read or update link , the link looks like app/{93493043.034}/show However when i put the adaptor, the link cannot be followed on the data-url because it gets encoded and displays app/%7B93493043.034%7D/show

How can i make it work as normal. if i remove the adaptor, data-binding does not work with ajax enabled only with ajax disabled.

[tbosch]

Hi, mmh, the adapter only does the following to routing/location handling in angular:

someModule.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
});
// Startup the location handling
someModule.run(function($location) { });

Could you try again with these settings and without the adapter? Do you see the same problems then?

Sorry, I haven't used rhoMobile yet...

Tobias