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 Angular ng-view/routing not working in PhoneGap but it doesn't help.
This is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="RoutingApp">
<head>
<title>Big Gym</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/courses.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="mainContainer">
<div ng-view></div>
</div>
<!--Footer-->
<div my-footer></div>
<!-- Include the AngularJS library -->
<script src="js/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<!-- Scroll-->
<script src="js/angular-smooth-scroll.min.js"></script>
<!-- UI Bootstrap -->
<script src="js/ui-bootstrap-tpls-0.13.0.min.js"></script>
<!-- Directives -->
<script src="js/directives/footer.js"></script>
<!-- Controllers -->
<script src="js/controllers/MapController.js"></script>
<script src="js/controllers/CourseHomeController.js"></script>
<script src="js/controllers/CourseController.js"></script>
<script src="js/controllers/InstructorController.js"></script>
<script src="js/controllers/NavbarController.js"></script>
<script src="js/controllers/categoriesController.js"></script>
<!-- Services -->
<script src="js/services/courses.js"></script>
<script src="js/services/categories.js"></script>
<!-- Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</body>
</html>
app.js
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: '/'
});
});
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
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.
