The JavaScript blog.


libraries modules graphs angularjs boilerplates

Angular Chart, pragmatic-angular, ng-boilerplate-app

Posted on .

Angular Chart

Angular Chart

Angular Chart (GitHub: jtblin / angular-chart.js, License: BSD) by Jerome Touffe-Blin is a set of native AngularJS directives for Chart.js.

It works by allowing you to define data and labels in the Angular controller, so your markup basically just has to define what kind of chart to use. The advantage of this is it's reactive, so it works really well if your data changes.


What if you've got lots of jQuery plugins but don't have AngularJS event bindings? Lars Gersmann has written pragmatic-angular (GitHub: lgersman / pragmatic-angular, License: GPL/MIT), which allows you to declaratively bind jQuery plugins to elements in markup.

If the plugin has custom events then you can handle them with ng-on. This works with both native and custom events, so you could use ng-on="{ click : onClick}" to add a click handler.

Even though the plugin is technically very simple, Lars has provided some useful real world examples in the readme so you can see how it's used.


I'm a big fan of writing AngulaJS/Knockout/etc. applications with Browserify, so I thought Mattia Franchetto's ng-boilerplate-app (GitHub: mtfranchetto / ng-boilerplate-app, License: MIT) was pretty cool. It's a boilerplate for Angular/Bootstrap applications, and includes file watching, live reloading, CSS vendor prefixing, code coverage, and more.