Q: AngularJs routing in single page structure [JQM-Single Page] Currently i am doing routing in different pages and it will fine
angular.module('myApp',[]).config(function ($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);
    $routeProvider.
    when("/",
    {
        templateUrl: "index.html"
    }).
    when("/foodscreen",
    {
        templateUrl: "addfood.html"
    })
});

through this way everything is fine but now i am making application with AngularJs and JQuery-Mobile in single page structure so my question is that how i configure routing in single page structure 
Single Page Structure Example
<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>



A: Here's how I'm doing it in backbonejs. Samples are in coffee script. First you need to tell jqm to not listen for hash changes:
$(document).on "mobileinit", ->
  # Prevents all anchor click handling including the addition of active button state and alternate link bluring.
  $.mobile.linkBindingEnabled = false
  # Disabling this will prevent jQuery Mobile from handling hash changes
  $.mobile.hashListeningEnabled = false
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;

Sample route config in backbone:
routes:
  "": "home"
  "home": "home"

home: ->
  $.mobile.loading "show"
  currentView = new HomeView(
    el: "#home"
    model: new HomeModel()
  )
  # render the page... view is using underscorejs for applying templates
  currentView.render()
  # need to apply jqm styles...
  $(currentView.el).trigger('create');
  # now use jqm to change the page
  $.mobile.changePage "#" + currentView.el.id,
    reverse: false
    changeHash: false

The routing part is specific to backbonejs. Here is a link that does something similar http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/. I had problems when I removed the page on the pagehide event. I think the more elegant approach was to simply use the trigger('create') method to get the jqm markup back on the page. Hope this helps!
