I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li><a href="#">Home</a></li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
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);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
