This project is a bare bones Angular application that will serve as a starting point for building data visualizations using D3.js.
This project is generated with yo angular generator version 0.15.1.
This project uses the Gulp task runner.
Run gulp build
for building and gulp serve
for preview.
Running gulp test
will run the unit tests with karma.
This project is based on D3 on Angular: How to use d3.js visualizations in an angular.js web app?.
The following are some additional details that may help you set up your development environment and scaffold a new application.
Be sure your installations of Node.js and NPM are up to date.
Install Yeoman, Bower, and some other tools with the following command.
npm install -g grunt-cli bower yo generator-karma generator-angular
Use Yeoman to scaffold your app.
yo angular [appName]
Grunt is the default task runner. However, if you choose Gulp, during the scaffolding process you may see a message like this:
npm WARN gulp-karma@0.0.4 requires a peer of karma@>=0.10 <=0.13 but none was installed.
You can ignore this message, because Gulp plugins are not developed by the Karma team. Instead, they encourage calling Karma directly from the Gulp task.
So, you can remove gulp-karma with the following command:
npm uninstall --save-dev gulp-karma
To run tests you may need to run the following:
npm install karma-phantomjs-launcher --save-dev
npm install jasmine-core --save-dev
npm install karma-jasmine --save-dev
Further details on Karma configuration are provided below, so read on...
The Gulp support in the Yeoman Angular Generator contains some bugs out of the box. To address these issues, change your gulpfile.js as described here.
If you chose not to use Sass in the scaffolding options, you will want to complete the following:
-
Change your styles path to use CSS files instead of SCSS files.
- Replace this:
styles: [yeoman.app + '/styles/**/*.scss']
- with this:
styles: [yeoman.app + '/styles/**/*.css']
-
Remove the SASS piping block:
.pipe($.sass, { outputStyle: 'expanded', precision: 10 })
Here are the steps for configuring Karma in your gulpfile.js.
-
Add a reference to the Karma server at the top of your gulpfile.
var karmaServer = require('karma').Server;
-
Replace your paths definition.
var paths = { scripts: [yeoman.app + '/scripts/**/*.js'], absoluteScripts: [__dirname + '/' + yeoman.app + '/scripts/**/*.js'], styles: [yeoman.app + '/styles/**/*.css'], test: ['test/spec/**/*.js'], absoluteTest: [__dirname + '/test/spec/**/*.js'], testRequire: [ 'bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', 'bower_components/angular-resource/angular-resource.js', 'bower_components/angular-cookies/angular-cookies.js', 'bower_components/angular-sanitize/angular-sanitize.js', 'bower_components/angular-route/angular-route.js', 'bower_components/angular-animate/angular-animate.js', 'bower_components/angular-touch/angular-touch.js', 'bower_components/angular-ui-sortable/sortable.js', 'bower_components/angular-local-storage/dist/angular-local-storage.js', 'test/mock/**/*.js', 'test/spec/**/*.js' ], karma: __dirname + '/' + yeoman.test + '/karma.conf.js', views: { main: yeoman.app + '/index.html', bowermain: yeoman.temp + '/index.html', files: [yeoman.app + '/views/**/*.html'] } };
-
Replace your
test
task./** * Run tests once and exit. */ gulp.task('test', function (done) { new karmaServer({ files: paths.testRequire.concat(paths.absoluteScripts, paths.absoluteTest), configFile: paths.karma, singleRun: true }, done).start(); }); /** * Watch for file changes and re-run tests on each change */ gulp.task('tdd', function (done) { new karmaServer({ files: paths.testRequire.concat(paths.absoluteScripts, paths.absoluteTest), configFile: paths.karma }, done).start(); });
Before you proceed with d3 installation, I would try running all the Gulp tasks listed in the gulpfile.
I think I've covered all the obstacles I encountered along the way. If you run into any trouble, please feel free to contact me.
Happy Coding!