Add locale motif to AngularJS app

Question

I am trying to customize the locale language for a Yeoman based AngularJS application.

When I serve the dist package after building my application (grunt build), the script link disappears. Here is a list of my dependencies on the index.html file.

<!-- 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-bootstrap/ui-bootstrap-tpls.js"></script> <script src="bower_components/moment/moment.js"></script> <script src="bower_components/angular-moment/angular-moment.js"></script> <script src="bower_components/ngstorage/ngStorage.js"></script> <script src="bower_components/angular-ui-select/dist/select.js"></script> <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script> <script src="bower_components/angular-hotkeys/build/hotkeys.min.js"></script> <script src="bower_components/moment/locale/es.js"></script> <!-- endbower --> <!-- endbuild --> 

Where should I place this script link to save it for the dist package?

 <script src="bower_components/moment/locale/es.js"></script> 

Thanks in advance!

Answer 1

You should insert out the bower section, for example:

 <!-- 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-loading-bar/build/loading-bar.js"></script> <script src="bower_components/angular-hotkeys/build/hotkeys.min.js"></script> <!-- endbower --> <script src="bower_components/moment/locale/es.js"></script> <!-- endbuild --> 

Your grunt / gulp task will automatically populate the bower:js section (each time a change to bower.json ) by looking at the main entry in the bower.json files of each component that you need. Locale files are not listed as main files, so even if you place them between the bower:js and endbower manually, this will disappear with the next change to the bower.json file or during the build process.

The code that you put outside the bower section will remain there.

And as a result, during the build process, all the files associated with between build:js and endbuild comments are combined into one vendor.js file.