Phonegap / Routing

[Motteer]

Hi, i know there are several posts about using the adapter in combination with phonegap. But could someone explain how to use routing with phonegap? I spend lot of hours and it didn´t worked for me. Does nobody has an example of an app which uses the routing?

(Doc / read me and the issus here i´ve already read)

EDIT: I forgot to mention that the routing within one file is working ...

$routeProvider

.when('/test', {
    templateUrl: '#test',
    jqmOptions: { transition: 'slide' }
});

But i don´t want one file with 400 lines of code... Thank you!

[tbosch]

Hi, did you read the suggestions in #185 form @mlegenhausen? @mlegenhausen, could you try to help @Motteer?

Thanks! Tobias

[mlegenhausen]

You should not use the hash tag approach for the template URL cause it has the downside of longer loading times at the start and higher RAM consumption. Split your app in several html files and use jqm DOM caching or preloading.

The routing should work as in an normal angular app. Disable the html5mode and define as much config blocks in your app as you need. So you can split up your routes. Currently in our app we have the same big routing file, but I am planing to reorganize our app by feature. Take a look at https://github.com/joshdmiller/ng-boilerplate

Currently I have no example application that I could show. But I had problems too when using the hash approach for templateUrl by using the path to a html file the problem was gone.

I hope that helps.

[Motteer]

Thanks @tigbro @mlegenhausen ! It works. I would like to summarize what i have done: ++++++++++++++++++++++++++++++++++ --> $locationProvider.html5Mode(false); --> index.html holds the "first" page, so there is no routing... --> example for routing in app, works! // $location.url('/test'); $routeProvider

.when('/test', { templateUrl: 'test.html', jqmOptions: { transition: 'slide' } }); --> use 'data-prefetch' to preload pages (http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html) ++++++++++++++++++++++++++++++++++ --> I would like to hold the first page also outside of the index.html. So the following approach doesn´t work: .when('/index.html', { templateUrl: 'test.html', jqmOptions: { transition: 'none' } }); ... and the empty page in index.html: div data-role="page"

Thank you!

[mlegenhausen]

Precaching integration in the router would be a nice feature. I will open an issue.

[Motteer]

Yeah, that would be nice. Any idea to "outsource" the first page? Thanks!

[mlegenhausen]

You can use a template engine and let a build tool like grunt generate the first page.

[Motteer]

Ok, thanks for this suggestion.

[mlegenhausen]

Or you can try to define a otherwise route.

$routeProvider.when('/main', {
  templateUrl: 'page.html'
})
.otherwise({
  redirectTo: '/main'
});

So when you open the file associated with / it gets redirected to /main which will open a page. Don't know if this will work.

[Motteer]

Not bad! Actually this works. Thanks!

[tbosch]

Thanks @mlegenhausen! Can we close this?

Tobias

[mlegenhausen]

I never had a problem with this ;)

[Motteer]

Yes, we can ;-) Thanks!

[mlegenhausen]

Little update, I refactored my project to the structure of ng-boilerplate (organization by feature). There is only one downside. When creating your concatinated version of the code you need to keep your folder structure for the app cause the jqm html files can not be converted with html2js. But that causes no problems at all.

[tbosch]

Thanks for the tip, @mlegenhausen.