Develop Reference

How do I setup an AngularJS app with onDeviceReady and initialize functions for Cordova?

I'm working on my first Cordova app to use AngularJS and I'm a bit lost as to how to coalesce the starting JS for a Cordova project.
I presently have the default index.js file that is included with Cordova that I've modified to include some events based on when the device goes on or offline. It creates an object (app) and adds functions for initialize, bindEvents, and onDeviceready.
Where should I define the AngularJS application? After the app.initialize() function call at the bottom of the document? Or can I ditch the original Cordova structure for the JS file entirely and do something else for the onDeviceReady?
Thank you!

Basically you can define angular anywhere, I recommend a separate file.
The thing you have to worry about is angular being loaded first before cordova.
Below is an example how to overcome this using a service.
.service('cordovaReady', function($q){
var cordovaDefer = $q.defer();
//Note: if you want browser support you'll need to detect
//what platform you're running because deviceready event won't be called
//unless cordova is running.
document.addEventListener("deviceready", cordovaDefer.resolve, false);
return function(){
return cordovaDefer.promise;
};
});
And using it every time you use a cordova plugin in your app like so:
//$cordovaFacebook is just an example
.controller('someCtrl', function(cordovaReady, $cordovaFacebook){
cordovaReady()
.then(function(){
//Plugins available here
$cordovaFacebook.api('/me').then(...);
});

Polymer starter kit, Application Error

I'm just building a starter app with polymer starter toolkit.
Everything was fine till yesterday. I could build android app with cordova and run it straight to my android device. Now I've added a new route in routing.html called login where I did setup a simple firebase connection as well.
<script src="../../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
page('/login', function () {
app.route = 'login';
});
// add #! before urls
page({
hashbang: true
});
});
</script>
If I run it local in chrome it work really well. But then when built with cordova and I click on the menu to open a page that error appear:
Anything to do with the new route or the firebase connection?

#Dragod83
It has to do with polymer being new and not support by many browser.
Polymer - Browser Compatibility
In it you will see that Android is support, but they fail to give a version. We can assume it is the latest - using Lolipop or better. Even so, the library that is used for Phonegap development is not that current.
It might working with crosswalk, but I have not information on that either way.
In short, polymer is not ready for prime-time, and therefore not ready for use with Cordova or Phonegap. This may change, but polymer has been slow in giving details for using polymer on hybrid platforms.
Best of Luck

Solved. For some reason (unknown to me) I had to create a folder named android_asset inside
AndroidStudioProject/myappname/app/src/main/android_asset
Then I paste the content of www folder and it's now working.
Also replaced jQuery & firebase CDN link with bower. Look like file that require a connection do not work.
https://github.com/PolymerElements/polymer-starter-kit/issues/374

Cordova with Angular, how to get deviceready event

I have been having various issues with the device ready event, from the deviceready has not fired after 5 seconds error to not having the plugins work.
From what I understand from my research, the following is required (please correct me if i'm wrong):
angular must be loaded before the deviceready event or it wont pick it up
cordova.js must be loaded in less than 5 seconds
So my question is - how do I get cordova.js loaded as quick as possible while making it wait for angular to be ready for the deviceready event?

I use manual bootstrapping to get it work (perfectly)
function bootstrapAngular() {
var domElement = document.querySelector('html');
angular.bootstrap(domElement, ['appName']);
}
if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
// URL: Running in Cordova/PhoneGap
document.addEventListener("deviceready", bootstrapAngular, false);
the if because my app is accessible form browser (either "http://" or "https://") and cordova("file://").

Load cordova.js after loading angular, and error 'deviceready not fired after 5 seconds' you will face only on desktop browser, instead when you will try on actual device or emulator, the event will fire.

You can use Corvoda Mocks to simulate the device's state on Chrome for testing your app.

You need to load AngularJs before Cordova.
If you want, here's a working seed:
https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed
Just remember that some plugins can't be used in a emulation, so use cordova run --device to make sure that anything is working properly.

how to execute some function in every time page reload in AngularJs?

I am trying to execute function every time page reloads.
I used this, But its not working properly.
$(window).load(function () {
$rootScope.pageClass = "page-fadein-down";
});
How to do this angularjs or jquery?
Any help ?

You can use angular app.run() block. Angualr JS Module docs
Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
myApp.run(['$rootScope', function($rootScope) {
$rootScope.pageClass = "page-fadein-down";
}]);

Dynamically loaded AngularJS application

I'm looking to integrate an AngularJS web application into a number of websites. I'd like to be able to provide each website administrator with an HTML code, such as the following:
<div id='angular-integration-app'></div><script src="widget.js"></script>
With this HTML code inserted into the website, the website should load AngularJS and insert an AngularJS application as a child element of the element labeled with the ID of "angular-integration-app."
This Plunker has an implementation, however this implementation isn't working. It fails intermittently, with an error of:
Uncaught ReferenceError: angular is not defined application.js:1
Uncaught Error: [$injector:modulerr] angular.js:38
I've noticed that it usually works fine the first time it's loaded, but when the browser refresh button is pressed, it often fails. This is particularly true when it's not being hosted through Plunker.
Please advise on the best way to create a dynamic AngularJS application integration that works all the time.

This inconsistent behavior is because sometimes the page is cached and the code is executed synchonously, sometimes it does not.
To fix that, you need to wait for angular to be ready, then declare your module, and then bootstrap the document with your module. You cannot use ng-app in the HTML if the bootstrapping is executed "afterwards" (asynchronously, out of angular context). I have made the changes to show you how it should be:
var element = document.querySelector('#angular-integration-app');
angular.element(element).ready(function() {
var app = angular.module('myapp', []);
app.directive('customForm', function() {
return {
restrict: 'A',
template: 'hello world'
};
});
angular.bootstrap(element, ['myapp']);
});
http://plnkr.co/edit/7KbD1Okwx0MwhDIJXIGE?p=preview
Alternatively, if you don't want angular to mess up with your target html (and what happens if he is using another version of angularjs himself?), you could create an iFrame to isolate your angular, style, and code.

The code in this Plunker looks like it solves the problem. I'm now adding AngularJS as a child of the head element (the variable named "script"), and holding off on modifying the DIV or loading the AngularJS application until "script.onload." I incorporated some of the ideas from floribon's post into this Plunker as well.
script.onload = function() {
// code here
};