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'
])
Related
I'm trying to configure the locale language for an AngularJS app based on Yeoman.
When I serve the dist package after building my app (grunt build), the script reference dissapears.
Here's 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 reference to keep it for the dist package?
<script src="bower_components/moment/locale/es.js"></script>
Thanks in advance!
You should insert it outside the bower section, like this:
<!-- 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 is automatically filling the bower:js section (each time there a change to bower.json happens) by looking into main entry in bower.json files of every bower component you require. The locale files are not listed as main files, so even if you'd put it between bower:js and endbower section manually, it'd dissapear with the nearest change of the bower.json file, or during the build process.
The code you put outside the bower section will stay there.
And in the end, during the build process, all the files linked between build:js and endbuild comments are concatenated into one vendor.js file.
I just installed Angular UI Grid via Bower.
My bower_components directory looks like this:
.
..
angular
angular-animate
angular-cookie
angular-cookies
angular-mocks
angular-resource
angular-sanitize
angular-touch
angular-ui-grid <-- the interesting directory
angular-ui-router
angularjs-rails-resource
bootstrap-sass-official
fontawesome
jquery
ng-token-auth
Confusingly, my index file looks like this:
<!-- build:js(src) 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/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="../bower_components/angular-cookie/angular-cookie.js"></script>
<script src="../bower_components/ng-token-auth/dist/ng-token-auth.js"></script>
<script src="../bower_components/angularjs-rails-resource/angularjs-rails-resource.js"></script>
<!-- endbower -->
<!-- endbuild -->
Notice the absence of angular-ui-grid.
It's not that there are no .js files in bower_components/angular-ui-grid:
$ find bower_components/angular-ui-grid -name '*.js'
bower_components/angular-ui-grid/ui-grid.js
bower_components/angular-ui-grid/ui-grid.min.js
What could be the problem?
Ah ha. I had angular-ui-grid in devDependencies in bower.json. It needed to be in dependencies.
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.
Introducing requireJS into my angjlarJS app I asked myself what happens with the bower scripts and my application scripts(services etc...).
Do I have to remove all and configure every angular bower component and application scripts with requireJs config?
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/authenticationService.js"></script>
<!-- endbuild -->
<script src="scripts/vendor/linq.js"></script>
Due to how Angular.js loads dependencies that's not the greatest idea. Forcing the entire thing through RequireJS would mean a decent amount of Angular finicking, which isn't fun.
I would recommend instead to make sure all of those are minified (they don't look minified from the quote) and concatenate them all, then serve that big file.
Trying out Yeoman (1.0.4). Generated an Angular app with yo angular; entered No to installing Bootstrap with Sass, as I wanted Bootstrap v 3 with LESS.
After scaffolding, to get Bootstrap 3, I entered:
bower install bootstrap
That installed bootstrap into bower_components/bootstrap folder. But it did not link/include Bootstrap's CSS or JS in index.html file. Why?
The index.html file does have Angular js files from bower_components folder:
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbuild -->
But not bootstrap files. Why? Do I have to add/link to them manually? What am I doing wrong? How can I add Bootstrap after generating a scaffold for my app?
According to yeoman's Getting Started guide:
# Install it and save it to bower.json
>bower install jquery-pjax --save
# If you're not using RequireJS...
>grunt bower-install
This is supposed to inject your dependencies into your index.html file.
Note:
There is some setting up that needs to be done, before being able to use bower-install.
See, here for more details.
You must edit the index.html. Yeoman generator builds the base index.html. Bower only downloads dependencies as packages... but that's all, it doesn't know anything else about your app and how are you going to use the packages it downloaded. You must add the desired files by yourself.
With https://github.com/stephenplusplus/grunt-bower-install, if you have the following in your index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then bower install will add the vendor files to your html whenever it runs. Otherwise, yes.
Using yeoman, you install dependencies with the --save flag to update the bower.json file.
After that, you run $ bower update(optional) and do a $ grunt wiredepto inject the dependencies into your index.html.
If you look at the comments in your index.html generated by Yeoman, you will see something like:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
It is within those comments that the dependencies will be injected
Wiredep does it without depending on Grunt or any other build tool: https://github.com/taptapship/wiredep
npm install --save wiredep
Insert placeholders in your code where your dependencies will be injected:
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
Let wiredep work its magic:
$ node
> require('wiredep')({ src: 'index.html' });
Since Bootstrap version 3.3.5, the bootstrap.css file has been removed from Bootstrap's package manager json. Thus, I had to roll back to version 3.3.4 before running wiredep.
bower install --save bootstrap#3.3.4