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: '/'
});
});
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
You should create your project using cordova CLI.
Like here: https://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface
I had so many problems with cordova months ago, so i moved my source to a new project created using CLI and everything is working.
The most important thing that you should considere when you move to CLI, is the informations about debug that CLI compiler give to you.
Related
I am working on HTML5 application with Trigger IO framework.I tested it on iPhone and it is working well there.But problem is with the Android. I am getting following error when I debug the application.
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
this is for every resource file referenced from the html header. My header code is :
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/index.js"></script>
both files are present on the location and working well on iOS. But problem is with Android/Chrome. Any workaround ?
EDIT
Following is the header of the index.html :
<head>
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
'self'; img-src https://*; child-src 'none';">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="js/slick-theme.css"/>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/network.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
</head>
Note : If I remove jquery.mobile-1.4.5.min.js file then it is taking reference of index.js
It could be a regression of:
https://github.com/jquery/jquery-mobile/issues/6746
You can use the httpd module as a workaround for this and similar bugs in other libraries:
https://trigger.io/modules/httpd/current/docs/index.html
I've written an app in cordova 4.0 with jquery mobile & jquery, and when I try to run the app on Galaxy 2 with android 2.3.5 (gingerbread) all I get is white screen without any error or anything going on.
note: I capture any exceptions from javascript and alert them, so if there was an exception I should have seen a message. but there's nothing.
any idea why? does Cordova suppose to work properly on android 2.x? I found mix opinions on that subject...
thanks!
EDIT: adding the source code. note that I have js that wrap cordova so everything under utils.* is a wrapper layer for cordova. this is index.html, the first page that should be loaded. another thing I want to say is that I added a code to catch and alert any exceptions (window.onerror = function(message, url, lineNumber)...) and alert them, and it usually work but in this case I see no alert.
<!DOCTYPE html>
part of pages we load does not work.
-->
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!-- <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" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- My extensions to jquery-mobile css -->
<link rel="stylesheet" type="text/css" href="css/my-jquerymobile-extend.css" />
<!-- all basic css -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/msgbox.css" />
<link rel="stylesheet" type="text/css" href="css/intro.css" />
<link rel="stylesheet" type="text/css" href="css/splash.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/result_page.css" />
<link rel="stylesheet" type="text/css" href="css/intlTelInput.css" />
<title>SeekWhale</title>
<!-- include cordova and jquery -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
<script type="text/javascript" src="js/jquery/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery/custom_loading_gif.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-draggable.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.min.js"></script>
<!-- Include utils -->
<script type="text/javascript" src="js/utils/config.js"></script>
<script type="text/javascript" src="js/utils/flags.js"></script>
<script type="text/javascript" src="js/utils/ajax.js"></script>
<script type="text/javascript" src="js/utils/debug.js"></script>
<script type="text/javascript" src="js/utils/visuals.js"></script>
<script type="text/javascript" src="js/utils/device.js"></script>
<script type="text/javascript" src="js/utils/contacts.js"></script>
<script type="text/javascript" src="js/utils/events.js"></script>
<script type="text/javascript" src="js/utils/navigation.js"></script>
<script type="text/javascript" src="js/utils/phone_numbers.js"></script>
<script type="text/javascript" src="js/utils/prompt.js"></script>
<script type="text/javascript" src="js/utils/forms.js"></script>
<!-- Replace UI language with chosen language -->
<script type="text/javascript" src="js/languages/dictionary.js"></script>
<script type="text/javascript" src="js/languages/hebrew.js"></script>
<!-- function to init pages -->
<script type="text/javascript" src="js/init_page.js"></script>
</head>
<body data-role="page">
<img class="splash" src="img/bg-entry.png"></img>
<script type="text/javascript">
// set language
ui_dictionary.set_dictionary_words();
// called when cordova is ready to run page init script
function InitApp()
{
setTimeout(function()
{
utils.prompt.log("app started!");
var effect = utils.navigation.transition.slidedown;
// if should skip directly to main
if (utils.flags.skip_to_main)
{
utils.prompt.log("skip to main page");
utils.navigation.load_page(utils.config.get_last_page(), effect);
}
// if require first setup open the first setup page:
else if (utils.config.get_successfully_registered() == false)
{
utils.prompt.log("load register");
utils.navigation.load_page("register.html", effect);
}
// if registered but not confirmed, go to confirm page
else if (utils.config.get_is_device_confirmed() == false)
{
utils.prompt.log("load confirm page");
utils.navigation.load_page("confirm.html", effect);
}
// if all goes well, open the main page!
else
{
utils.prompt.log("load main page");
utils.navigation.load_page("main.html", effect);
}
}, 1);
}
utils.events.on_device_ready(InitApp);
</script>
</body>
<script type="text/javascript" src="cordova.js"></script>
this one should be the first js to be loaded. put all other js files after it.
I am getting following exception...
ReferenceError: cordova is not defined
at cordova.addConstructor(function()
index.html
<!DOCTYPE html>
<html>
<head>
<meta 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" />
<!-- ionic css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="libs/leaflet/leaflet.css" />
<!--<link rel="stylesheet" href="libs/leaflet/leaflet-routing-machine.css" />-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="libs/leaflet/leaflet.ie.css" />
<![endif]-->
<!-- ionic/angularjs scripts -->
<title>"Test App"</title>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views
Additional attributes set its look, ion-nav-bar animation and icons
Icons provided by Ionicons: http://ionicons.com/
-->
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<div id="time"></div>
<input type="hidden" value="" id="currentLatitude"/>
<input type="hidden" value="" id="currentLongitude"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>-->
<script src="libs/leaflet/leaflet.js"></script>
<!--<script type="text/javascript" src="js/core.js"></script>-->
<script src="libs/leaflet/angular-leaflet-directive.min.js"></script>
<!--<script src="libs/leaflet/leaflet-routing-machine.min.js"></script>-->
<!-- cordova script (this will be a 404 during development) -->
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAEWnOhu5ePxhmZ1Cx7ZgcamoRvN88mw2Y&sensor=true"></script>
<script type="text/javascript" src="js/samplePlugin.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function()
{
alert("HI1")
window.plugins.SamplePlugin.getTime
(
function(result)
{
alert("HI2")
displayTime(result)
},
function(error)
{
console.log(error)
}
);
}, true
);
function displayTime(result)
{
document.getElementById("time").innerHTML = result.time;
}
</script>
</body>
</html>
and
samplePlugin.js
var SamplePlugin = function()
{
};
SamplePlugin.prototype.getTime = function(successCallback, failureCallback)
{
return cordova.exec(
successCallback, //Function called upon success
failureCallback, //Function called upon error
'ExamplePlugin', //Tell PhoneGap to run "ExamplePlugin" Plugin
'getTime', //Tell the which action we want to perform, matches an "action" string
[]); //A list of args passed to the plugin, in this case empty
};
cordova.addConstructor(function()
{
cordova.addPlugin("SamplePlugin", new SamplePlugin());
});
ihave followed this tutorial
http://www.speakingcode.com/2012/05/29/call-native-android-java-code-from-html5javascript-using-phonegap-plugins-and-implement-async-callbacks/
I have created a application using Phonegap 2.9.0 .The Build which is running all the android phone version less than 4.0. When i instal in Android 4+ devices it shows blank screen.The same build works fine with ios all versions.Here the index.html
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
</head>
<body>
</body>
Here the explore snap
What change requires to run in android 4.0+ devices.Pelase help me to solve this issue
Try this
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
</head>
<body>
</body>
I'm using Phonegap + JQueryMobile + JQuery to create a map inside my index.html. There's a problem, in the browser my code works fine but when I try to run on my phone then not shows the map.
Here's the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript">
$(function() {
$("#map").gmap();
});
</script>
</head> <body><div id="map" style="height: 350px; width: 600px"></div></body></html>
I think that the the errors are on the script sources because i need to import the correct gmap for phones but i don't know.
Thanks!
Have you enabled internet access in AndroidManifest.xml?
<uses-permission android:name="android.permission.INTERNET" />