CODEWITHSUNDEEP
javascriptandroidangularjscordova
realtebo
realtebo

Reputation: 25637

How to use angularJs within Phonegap?

I'm trying to use angularjs into my phonegap app. I have succesfully created the cordova project. And it's working. The "connecting" became 'devicer ready'. All is ok

I followed this way: use angularjs services to detected cordova 'ready' event.

See the code, the problem is at the end of the question

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
    <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" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>
    </head>
    <body ng-controller="MyController">
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening" ng-hide="ready">Connecting to Device</p>
                <p class="event received"  ng-show="ready">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/q.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/fsCordova.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

Please notice I removed display: none; from css of .event.received into css file

fsCordova.js

angular.module('fsCordova', []).service('CordovaService', ['$document', '$q',
  function($document, $q) {

    var d = $q.defer(),
        resolved = false;

    var self = this;
    this.ready = d.promise;

    document.addEventListener('deviceready', function() {
      resolved = true;
      d.resolve(window.cordova);
    });

    // Check to make sure we didn't miss the 
    // event (just in case)
    setTimeout(function() {
      if (!resolved) {
        if (window.cordova) d.resolve(window.cordova);
      }
    }, 3000);
}]);

app.js

(function(){

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

    app.controller('MyController', function($scope, CordovaService) {

        this.ready = false;

        CordovaService.ready.then(function() {
            this.ready = true;
        });

    });

})();

The problem ? Using the monitor tool of android SDK, I see in the log this error, from angular.ks

Error: $injector:modulerr
Module Error

Failed to instantiate module MyApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.20/$injector/nomod?p0=MyApp
    at Error ()
    at file:///android_asset/www/js/angular.min.js:6:450
    at file:///android_asset/www/js/angular.min.js:20:466
    at file:///android_asset/www/js/angular.min.js:21:469
    at file:///android_asset/www/js/angular.min.js:33:267
    at Array.forEach (native)
    at q (file:///android_asset/www/js/angular.min.js:7:280)
    at e (file:///android_asset/www/js/angular.min.js:33:207)
    at dc (file:///android_asset/www/js/angular.min.js:36:309)
    at c (file:///android_asset/www/js/angular.min.js:18:139)

I supposed I've a problem with a .js file missing of misspelled, but file names and file path are right.

Help me, please, to debug.

Upvotes: 2

Views: 723

Answers (1)

V31
V31

Reputation: 7666

Change this code in your html markup:

ng-app="MyApp"

to 

ng-app="myApp"

Upvotes: 1

Related Questions