Angularjs not working with cordova

Question

I am using cordova to develop an android application and try angularjs with it. When I try the application with browser its working but when I try the application on the android emulator I am only getting Connecting to Device.

var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady,false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { angular.bootstrap(document, ['HelloWorld']); var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } }; app.initialize(); <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app" ng-controller="HomeCtrl"> <h1 ng-bind="name">Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <div style="margin-top:10px;"> <button ng-click="process()">Click Here</button> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> /** * Module * * Description */ angular.module('HelloWorld', []).controller('HomeCtrl', ['$scope', function($scope){ $scope.name = "Welcome TO Cordova"; $scope.process = function(){ $scope.name = "Welcome Mr. Ddeveloper"; } }]) </script> </body>

did you tried to use angularjs creating a module and binding it with ng-app ? I can see that your code is somewhere messy with cordova events. Why don't you use angular outside? — Gianmarco
– Gianmarco, Commented Dec 3, 2015 at 11:37
You means to say that initialize angular scope outside the deviceready event — vimal
– vimal, Commented Dec 3, 2015 at 11:56
yep, just create a normal angularjs app and then do what you must with cordova... I tried once, it should work flawlessy — Gianmarco
– Gianmarco, Commented Dec 3, 2015 at 12:03
Removed all javascript code and added ng-app="HelloWorld" to the <html> but still same problem works in browser not in emulator — vimal
– vimal, Commented Dec 3, 2015 at 12:33

Sajesh Kumar · Accepted Answer · 2015-12-08 08:57:31Z

Error while executing the above snippet:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback
Uncaught Error: [$injector:modulerr]

Try the following way:

<html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app" ng-controller="homeCtrl"> <h1 ng-bind="name">Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <div style="margin-top:10px;"> <button ng-click="process()">Click Here</button> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/homeController.js"></script> </body> </html>

In homeController.js

angular.module('HelloWorld', []).controller('homeCtrl', ['$scope', function($scope){ $scope.name = "Welcome TO Cordova"; $scope.process = function(){ $scope.name = "Welcome Mr. Ddeveloper"; } }])

Collectives™ on Stack Overflow

Angularjs not working with cordova

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related