Issue with page hashes / redirecting... maybe I'm doing it wrong?

[atuttle]

Just trying to get started...

app.config(function($routeProvider) {
    $routeProvider
        .when('/nav', { templateUrl: '#nav' })
        .when('/taskbox', { templateUrl: '#taskbox' })
        .otherwise({ redirectTo: '/taskbox' });
});

In a sense, it works. But the problem that I see is that when a page is loaded, instead of changing the page hash to #taskbox as would be done with vanilla jquery mobile, or changing it to #/taskbox as would be done with vanilla angular, the change is pushed as /taskbox; so that the full url becomes http://foo.com/m/taskbox when I was expecting http://foo.com/m/#/taskbox or http://foo.com/m/#taskbox.

Have I done something wrong?

As I said, this doesn't appear to break the functionality of loading the default page, but as a result I have two problems:

• reloading the page results in a 404, because /m/taskbox doesn't exist, only index.html, and
• I can't figure out the proper syntax to create hyperlinks to other pages.

Your fiddle'd example uses settings (no slash, no hash) as the href value which just seems very "wrong" to me. In fact, if I view its source and save it as local file test.html, then open it in my browser, I can see that getting from the first page to the settings page works, somehow, without changing the url.

But clicking save on the settings page animates back to the main page, then (without animation) goes back to the settings page, and displays the loading graphic forever, never finishing or going back to the main page.

My apologies, but I just don't think this is a very good example.

[tbosch]

Hi, your confusion is due to the fact that the adapter enabled html5Mode on the $locationProvider (see the angular docs for this). As you are using routes with paths and not hashes, the url is changed using the history API (this is all done by angular in html5 mode). If you used paths with .when('#nav') your url would contain hashes.

Yes, reloading a page when using paths does not work due to the usage of history api. If you use hashes in your routes, this problem is gone (see above).

Hyperlinks in pages:

For your routes, the proper hyperlinks would be <a href="nav">Go to nav</a>. If you declared your route using .when('#nav') the link would by <a href="#nav">. Explanation: We are using angular's routes for everything now, and the templateUrls only for loading the jqm pages.

Hope this helps, Tobias

[atuttle]

Thanks. Unfortunately I had to abandon that branch of my project because I'm on a tight deadline but I'll keep this in mind for the future.