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.
Related
I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.
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 am creating an Angular App,
var app = angular.module("myApp", ["ngRoute","ngMaterial","ngMessages"]);
When i am using 'ngMessages' with 'ngMaterial', it is not working.
Make sure you have loaded them in the references with the correct versions ,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="app.js"></script>
DEMO
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 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.