Search code examples
androidangularjscordovahybrid-mobile-app

No Screen Shows up in Mobile App, WebApp working fine

I am new to hybrid application developement, I am trying to make an application in angularJS, (Not IONIC). My App loads slow in browser but it works, however it doesnt work at all in mobile app.. I am serving it using grunt. But cant seem to figure out how to make it work in mobile.. index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
 <head>
<title>Quiz App</title>
<!--Stylesheets-->
<!--Bootstrap-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

<!-- injector:css -->
<link rel="stylesheet" href="styles/challenge.css">
<link rel="stylesheet" href="styles/discussion.css">
<link rel="stylesheet" href="styles/game.css">
<link rel="stylesheet" href="styles/login.css">
<link rel="stylesheet" href="styles/loginMail.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/profile.css">
<link rel="stylesheet" href="styles/ranking.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/subjects.css">
<link rel="stylesheet" href="styles/topics.css">
<!-- endinjector -->

<script src="cordova.js"></script>
<!--Scripts-->
<!-- JQuery-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js" ></script>
<!-- AngularJS-->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<!--<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="bower_components/angular-touch/angular-touch.js"></script>-->
<!--Supersonic-->
<!--<script type="text/javascript" src="bower_components/supersonic/supersonic.js"></script>
<script type="text/javascript" src="bower_components/supersonic/supersonic.core.js"></script>-->
<!--Bootstrap-->
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>


<!-- Application -->
<!-- injector:js -->
<script src="scripts/App.js"></script>
<script src="scripts/config/Route.js"></script>
<script src="scripts/services/DiscussionService.js"></script>
<script src="scripts/services/ProfileService.js"></script>
<script src="scripts/services/RankingService.js"></script>
<script src="scripts/services/SubjectService.js"></script>
<script src="scripts/controllers/0-ExamBattleController.js"></script>
<script src="scripts/controllers/Body/0-BodyController.js"></script>
<script src="scripts/controllers/Body/BodyController.js"></script>
<script src="scripts/controllers/ChallengeController.js"></script>
<script src="scripts/controllers/DiscussionController.js"></script>
<script src="scripts/controllers/GameController.js"></script>
<script src="scripts/controllers/LoginController.js"></script>
<script src="scripts/controllers/ProfileController.js"></script>
<script src="scripts/controllers/RankingController.js"></script>
<script src="scripts/controllers/SubjectController.js"></script>
<!-- endinjector -->

</head>
<body id="body">
<!--<p>App has loaded</p>-->
<div id="main" ng-view></div>

</body>
</html>

This is my app run and config

var BaseImagesUrl = 'images/';
var BaseTemplateUrl = 'templates/';

var app= angular.module('app', ['ngRoute']);

app.run(function($rootScope, $timeout, $location, $route){
    $rootScope.login = {};
    $rootScope.test = "Hello World";
    alert("app is running");
    console.log($route);
});

config goes here:

app.config(function($locationProvider,$routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: BaseTemplateUrl + 'login.html',
        controller: 'LoginController'
    })
    .when('/loginMail', {
        templateUrl: BaseTemplateUrl + 'loginMail.html',
        controller: 'LoginController'
    })
     .otherwise({
        redirectTo: '/'
    });

});
Solution

  • Please try to start the angular app inside onDeviceReady. 

    onDeviceReady : function() {
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['examBattle']);
 });

    }

    Remove ng-app

    Thanks, Madan