CODEWITHSUNDEEP
javascriptangularjsnode.jscordovangcordova
Sandy
Sandy

Reputation: 11

angular.js before cordova.js cause Unhandled exception in angular.js

I'm using Visual Studio 2015 to create a cross-platform tablet app. It works fine when I have cordova.js before angular.js. 

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" /> 

<!-- Cordova reference, this is added to your app when it's built. -->    
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>    

<!-- AngularJS references -->
<script src="scripts/frameworks/angular.js"></script>
<script src="scripts/frameworks/angular-route.js"></script>

<script src="scripts/script.js"></script>
<script src="scripts/controllers.js"></script>

However, I need to use ngCordova to add email composer. According to the ngCordova site, I need to include ng-cordova.js or ng-cordova.min.js in index.html file before cordova.js and after AngularJS / Ionic file (since ngCordova depends on AngularJS). So I put angular.js before cordova.js.

Now I get the error message "Unhandled exception at line 3400, column 9 in ms-appx://io.cordova.myapp4934a5/www/scripts/frameworks/angular.js."

I removed the ng-app from html tag and manually bootstrap AngularJS and this does't help. This is the script I put in the head tag before any other scripts.

<script type="text/javascript">
    var pgapp = {
        initialize: function () {
            this.bindEvents();
        },

        // Bind any events that are required on startup. Common events are:
        // 'load', 'deviceready', 'offline', and 'online'.
        bindEvents: function () {
            if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
              document.addEventListener('deviceready', this.onDeviceReady, false);
            } else {
              this.onDeviceReady(); // Browser!
            }
        },

        onDeviceReady: function () {
            if (window.device) {
                console.log('Running Cordova ' + window.device.cordova);
            }

            angular.element(document).ready(function() {
              angular.bootstrap(document, ['firstApp']);
            });
        }
    };
</script>

The following loads at the end of page.

<script type="text/javascript">
    pgapp.initialize();
</script>

I'm new to AngularJS and cordova. Please help.

Upvotes: 1

Views: 607

Answers (3)

MarioAleo
MarioAleo

Reputation: 424

You should load in this order: angular.js, ng-cordova.js, cordova.js.

If you want, here's a working seed: https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed

Upvotes: 1

Sandy
Sandy

Reputation: 11

<script src="scripts/platformOverrides.js"></script>

should goes before 

<script src="scripts/frameworks/angular.js"></script>

Here is the correct sequence.

<!-- Cordova reference, this is added to your app when it's built. --> 
<script src="scripts/platformOverrides.js"></script>   

<!-- AngularJS references -->
<script src="scripts/frameworks/angular.js"></script>
<script src="scripts/frameworks/angular-route.js"></script>

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Upvotes: 0

Fastboy619
Fastboy619

Reputation: 74

try the code below what I saw in your code was that you're waiting for a document ready which you should not do since OnDeviceready is the cordova equivelant of that so just remove the angular on document ready. 

<script type="text/javascript">
        var pgapp = {
            initialize: function () {
                this.bindEvents();
            },

            // Bind any events that are required on startup. Common events are:
            // 'load', 'deviceready', 'offline', and 'online'.
            bindEvents: function () {
                if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
                  document.addEventListener('deviceready', this.onDeviceReady, false);
                } else {
                  this.onDeviceReady(); // Browser!
                }
            },

            onDeviceReady: function () {
                if (window.device) {
                    console.log('Running Cordova ' + window.device.cordova);
                }
                  angular.bootstrap(document, ['firstApp']);
            }
        };
    </script>

Upvotes: 0

Related Questions