I am using jquery mobile with phonegap and angular JS. When include jquery Mobile, then nothing shown in android mobile and when remove jquery mobile evry thing work but cannot pick jquery-mobile.css. i think there is jquery confliction.
all files are includes as
<script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>
<script type="text/javascript" src="js/angular-carousel.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/lodash.underscore.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.min.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/ui-map.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<!-- NVD3 re-usable charting library (based on D3) -->
<script type="text/javascript" src="js/nvd3/d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="js/nvd3/angular-nvd3.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<!--- Imager Assets -->
<script type="text/javascript" src="js/custom/jquery.mobile.js"></script>
<script type="text/javascript" src="js/custom/jquery.vintage.js"></script>
<script type="text/javascript" src="js/custom/jquery.cropper.js"></script>
<script type="text/javascript" src="js/custom/spoon.js"></script>
<!--- Images Assets -->
<script type="text/javascript" src="cordova.js"></script>
Whats wrong with this.
any help will be appreciated.
use the phonegap developer app http://app.phonegap.com/, and connect the application using that app, the app have console, so that you can see exactly what wrong.
but as per my experience with PhoneGap+AngularJs+JQueryMobile, we have to choose either AngularJS or JqueryMobile both are not working together as expected. other wise choose appropriate modules of JqueryMobile and use them.
Related
I'm working on an ionic application with material design.
After taking a release built in PhoneGap and checking it on a mobile, it displays a blank white screen. It's already working in development as a debug APK. I don't know why it's not working on our my environment.
Below is my index.html:
<!-- script -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
<script src="lib/ion-md-input/js/ion-md-input.min.js"></script>
<script src="lib/ion-floating-menu/dist/ion-floating-menu.js" type="text/javascript"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="lib/sweet-alert/sweetalert-dev.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA_rECkai1SfPXFpmSXEqksKQaASuDHbOM&libraries=places&sensor=false">
</script>
<script src="lib/angular-google-places-autocomplete/dist/autocomplete.min.js">
</script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/service.js"></script>
<script src="js/service2.js"></script>
I know asking this is silly but I am stuck and not getting out of it. I am new to Angular.js and have created the following program but it is not running as the program can't find the script sources..I have tried all the possible ways but haven't found the solution.
<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
</head>
<body>
<div ng-controller="EventController">
{{event.name}}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" > </script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"></script>
</body>
</html>
Following is the snapshot of my folder arrangement:
I think you should remove the / before js in the src.if it is not working then check if it is the right path.
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"> </script>
Should Be
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/controllers/EventController.js"></script>
OR
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/EventController.js"></script>
Depending on your location and path of js folder....
Hi all i am working on angularJS app. Everything is fine but I have only one issue. I have to link and load(as dependency) in my app. That's why i have this kind of code
<script src="shared.js"></script>
<script src="user.js"></script>
<script src="home.js"></script>
<script src="product.js"></script>
<script src="comment.js"></script>
<script src="address.js"></script>
<script src="cities.js"></script>
<script src="phone.js"></script>
<script src="review.js"></script>
<script src="configs.js"></script>
<script src="app.js"></script>
And In app.js i have these app dependies
'mainApp.shareModule',
'mainApp.userModule',
'mainApp.homeModule',
'mainApp.commentModule',
'mainApp.addressModule',
'mainApp.citiesModule',
'mainApp.phoneModule',
'mainApp.reviewModule',
'mainApp.productModule'
Is there any solution like (lazy loading) but my understanding is about lazy loading is then i have to design all modules independent.
Thank you.
when im running my Ionic app inside iOS simulator,
and using the Safari Web inspector, i see this error:
file:///.../.../Application/.../myApp.app/www/lib/ionic/js/angular.min.js.map
Failed to load resource: The requested URL was not found on this server.
Anyone knows how to solve it?
Thanks.
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- Libraries -->
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/ng-lodash/build/ng-lodash.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/constants.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
</html>
I ended up importing ionic.bundle.js instead of ionic.bundle.min.js and the issue was gone
My html codeļ¼
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
My JavaScript code:
var myapp=angular.module('mail', ['ngRoute']);
But I get
Uncaught Error: [$injector:modulerr]
Why?
Please load jquery library first then load angularjs library, then ngRouter library see following line
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="mail.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Load JS files in order jQuery>Bootstrap>angular>route>mail. Also verify the version number of angular, ng-route you are using in your application. If not sure, use cdn.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular-route.min.js