MAOL MAOL - 5 months ago 99
Javascript Question

How to wait until all js scripts have been loaded in IONIC(AngularJS)?

I'm working with IONIC/AngularJS and I have a lot of JS Scripts.

I have seen that sometimes when the app is loading, some of the script is not loaded yet, so failed to login in the app (I have a login screen at first).

This is all my scripts:

<!-- ionic/angularjs js -->
<script src=" lib/Pouchdb/pouchdb-4.0.1.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script type="text/javascript" src="lib/a0-angular-storage/dist/angular-storage.min.js"></script>
<script type="text/javascript" src="lib/ion-affix/ion-affix.js"></script>
<script type="text/javascript" src="lib/angular-qr/angular-qrcode.js"></script>
<script type="text/javascript" src="lib/angular-qr/qrcodejavascript.js"></script>
<script type="text/javascript" src="js/angular-jwt.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/angular-locale_es-es.js"></script>
<script type="text/javascript" src="lib/angular-elastic/elastic.js"></script>
<script type="text/javascript" src="lib/angular-filter/dist/angular-filter.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/qrcode_V2.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/factoryutils.js"></script>
<script type="text/javascript" src="js/Toast.js"></script>
<script type="text/javascript" src="js/jquery.urlshortener.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script type="text/javascript" src="js/sweetalert.min.js"></script>

<script src="lib/ionic-material/ionic.material.min.js"></script>
<script type="text/javascript" src="js/ngprogress.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/MenuCtrl.js"></script>
<script src="js/HomeTabCtrl.js"></script>
<script src="js/LoginCtrl.js"></script>
<script src="js/TabEventosCtrl.js"></script>
<script src="js/DatabaseCtrl.js"></script>
<script src="js/HandleTokenValidity.js"></script>


My error is the next:


"TypeError: Cannot read property 'getPreferredLanguage' of undefined
at Object.getPreferredLanguage (file:///android_asset/www/js/ng-cordova.js:2826:32)
at file:///android_asset/www/js/LoginCtrl.js:76:39
at processQueue (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23394:28)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23410:27
at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24673:28)
at Scope.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24484:31)
at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24778:24)
at done (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19191:47)
at completeRequest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19363:7)
at XMLHttpRequest.requestLoaded (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19304:9)",
source: file:///android_asset/www/lib/ionic/js/ionic.bundle.js (21157)



The problem starts when trying to access to
$cordovaGlobalization
scope but I think that the library associated is not loaded at that time.

My question is if there is any way to make the application to wait until all the JS scripts have been loaded?

Thanks

Answer

I think your are looking for ionic.Platform.ready()

ionic.Platform.ready(function(){
  // will execute when device is ready, or immediately if the device is already ready.
});

Link to documentation