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>
Related
I just moved my working AngularJS project into a spring-boot configuration. Spring is not the issue because I am able to locate the index.html file and display "Test test test" in the browser which is written in that file. However all my scripts are returning the following:
In my index.html file I set the base href:
<html lang="en" ng-app="SharpVision">
<head>
<base href="/PersonalSite/src/main/webapp/">
<meta charset="utf-8">
My body in index.html
<body>
Test Test test
<ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>
<ng-view autoscroll="true"></ng-view>
<ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >
<!--Scripts-->
<!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="assets/libs/flexslider/jquery.flexslider.js"></script>
<script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
<script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular/angular-route.min.js"></script>
<script src="assets/libs/angular/angular-sanitize.min.js"></script>
<script src="assets/libs/angular/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="assets/libs/angular-flexslider/angular-flexslider.js"></script>
<script src="assets/libs/angular-backstretch/ng-backstretch.min.js"></script>
<script src="assets/libs/angular-parallax/angular-parallax.js"></script>
<script src="assets/libs/angular-fitvids/angular-fitvids.js"></script>
<script src="assets/libs/angular-masonry/angular-masonry.min.js"></script>
<script src="assets/libs/momentjs/moment-with-locales.min.js"></script>
<script src="assets/libs/humanize-duration/humanize-duration.js"></script>
<script src="assets/libs/angular-timer/angular-timer.min.js"></script>
<script src="assets/libs/ng-progress/js/ngprogress.min.js"></script>
<script src="assets/libs/angular-gmaps/angular-google-maps.min.js"></script>
<script src="assets/libs/lodash/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="app/app.module.js"></script>
<script src="app/app.directives.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.controllers.js"></script>
</body>
In my app.js file I set a constant:
app.constant('ROOT', '/PersonalSite/src/main/webapp/');
Now everything was working fine until I brought in boot. However I just set up a InternalResourceViewResolver to render the index.html which it did so spring-boot is doing its job. For some reason Angularjs cannot find its scripts even though it is given the correct paths to find them.
Directory:
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
I am currently working on a Yeoman generated Angular project.
I'd like to force bower.json to only utilize a dependency's *.min.js file rather than the full *.js version. I'm sure this is relatively easy to configure but I can't seem to figure it out.
For example, the following is being automatically injected:
<script src="bower_components/angular-chart/angular-chart.js"></script>
Instead of:
<script src="bower_components/angular-chart/angular-chart.min.js"></script>
Here's the full HTML from the relevant section:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-utils-pagination/dirPagination.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-circular-navigation/angular-circular-navigation.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<!-- endbower -->
<!-- endbuild -->
Any assistance would be greatly appreciate. Thank you!
The idea is that when you are running it for development you want to use the non minified js so that if there are any issues you can read the source easily. To run for development you would just use:
grunt serve
Then when you are ready to deploy it you can just run:
grunt
This will produce a minified combined scripts/vendor.js. The ful build solution will be in the dist folder.
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.