title: Angularjs routing on phonegap not working
body: <p>I have this web app that has to become a app using phonegap: the problem is that we used angularjs and routing and so the views. It seems that there is no way to make them work using phonegap, I already tried <a href="https://stackoverflow.com/questions/15105910/angular-ng-view-routing-not-working-in-phonegap">Angular ng-view/routing not working in PhoneGap</a> but it doesn't help.</p>
  
  <p>This is the <strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="RoutingApp"&gt;
  
  &lt;head&gt;
      &lt;title&gt;Big Gym&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/courses.css"&gt;
      &lt;link rel="stylesheet" href="css/navbar.css"&gt;
      &lt;link rel="stylesheet" href="css/sidebar.css"&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div class="mainContainer"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--Footer--&gt;
      &lt;div my-footer&gt;&lt;/div&gt;
  
      &lt;!-- Include the AngularJS library --&gt;
      &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Include the AngularJS routing library --&gt;
      &lt;script src="https://code.angularjs.org/1.2.28/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          app.initialize();
      &lt;/script&gt;
  
      &lt;!-- Scroll--&gt;
      &lt;script src="js/angular-smooth-scroll.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- UI Bootstrap --&gt;
      &lt;script src="js/ui-bootstrap-tpls-0.13.0.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Directives --&gt;
      &lt;script src="js/directives/footer.js"&gt;&lt;/script&gt;
  
      &lt;!-- Controllers --&gt;
      &lt;script src="js/controllers/MapController.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/CourseHomeController.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/CourseController.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/InstructorController.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/NavbarController.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers/categoriesController.js"&gt;&lt;/script&gt;
  
      &lt;!-- Services --&gt;
      &lt;script src="js/services/courses.js"&gt;&lt;/script&gt;
      &lt;script src="js/services/categories.js"&gt;&lt;/script&gt;
  
      &lt;!-- Maps --&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>app=angular.module('RoutingApp', ['ngRoute','ui.bootstrap','smoothScroll']);
  
  app.config(function ($routeProvider) {
      $routeProvider
          .when('/', {
              templateUrl: '/www/views/Home.html'
          })
          .when('/CourseHome/', {
              controller: 'CourseHomeController',
              templateUrl: '/www/views/CourseHome.html'
          })
          .when('/course/:id', {
              controller: 'CoursesJoinInstructor',
              templateUrl: '/www/views/Course.html'
          })
          .when('/courseByLevel/', {
              controller: 'CourseLevelController',
              templateUrl: '/www/views/CourseLevel.html'
          })
          .when('/coursesByCategory/', {
              controller: 'CourseByCourseCategoryController',
              templateUrl: '/www/views/CourseLevel.html'
          })
          .when('/instructor/:id', {
              controller: 'InstructorController',
              templateUrl: '/www/views/Instructor.html'
          })
          .when('/Location', {
              templateUrl: '/www/views/Location.html'
          })
          .when('/Categories/', {
              controller: 'CategoriesController',
              templateUrl: '/www/views/Categories.html'
          })
          .when('/form/:id', {
              controller: 'CourseController',
              templateUrl: '/www/views/Form.html'
          })
          .otherwise({
              redirectTo: '/'
          });
  });
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>var app = {
      initialize: function() {
          this.bindEvents();
      },
      bindEvents: function() {
          document.addEventListener('deviceready', this.onDeviceReady, true);
      },
  
      onDeviceReady: function() {
          angular.element(document).ready(function() {
              angular.bootstrap(document);
          });
      },
  };
  </code></pre>
  
  <p>With this code i get white screen on my android phone, without the index.js and putting ng-app in the body i can see the footer with the css, so the directives are working but not the views. Hope someone can help.</p>