Currently I writing a Grunt Build file ; which uses "usemin" I have created 3 Blocks in HTML which would create 3 files assets.min.js , lib.min.js etc..
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.min.js"></script>
<!-- endbuild -->
This works fine. But There are 2 major problems I am facing with it...
Angular shows error "Uncaught error [$injector:modulerr]..
It seems Usemin is also miniifying the files again.
I also tried 2nd option, by just concatinating these files i.e bypassing minification step avoiding Usemin.. still the same error
Please guide
Angular uses something called dependency injection to resolve your arguments. Angular knows what each object is by its name.
"$scope" will be initialised as a scope object because it is named "$scope". After usemin, this variable will be called something else, like "a", to save bytes. Angular doesn't know what "a" is and throws an error.
You can solve this like so:
Read here about the minification of angular apps
http://docs.angularjs.org/tutorial/step_05
Either follow the guide manually or use ngmin process BEFORE you run uglify.
Hope this helps!
You can solve this by 2 ways.
1. use unminified files in usemin block
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.js"></script>
<!-- endbuild -->
2. Copy scripts using grunt task
copy:{
scripts:{
files:[{
expand: true,
cwd:'<%= config.app %>',
dest: '<%= config.tmp %>', src: ['app/assets/js/lib/**/*.min.js']
}]
},
}
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:
I'm trying to add the angular-flot library to a yeoman scaffolded angular project.
I added it using
bower i --save angular-flot
which pulled it into my bower_components directory but didn't add it to the index.html file.
I added it manually (as well as a reference to the flot CDN) and it works fine using
grunt serve
however, when I do
grunt build
and load the index.html file from the /dist directory, I get an error that the angular-flot is not included. So I think it's not making it through minification.
This is how the relevant section of my index.html look. I manually added the three lines between endbower and endbuild
<!-- 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-sass-official/assets/javascripts/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-messages/angular-messages.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>
<!-- endbower -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<!-- endbuild -->
Have you tried running grunt wiredep? This should add the dependency to index.html.
Also, you need to make sure your dependency is included in app.js:
angular.module('yourApp', [
'ngMessages',
'ngRoute',
'ngSanitize',
//...
'angular-flot'
])
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
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.