I wrote an AngularJS wrapper for p5.js called angular-p5:

angular.module('angular-p5', [])
.service('p5', ['$window', function($window) {
  return $window.p5;
.directive('p5', ['p5', function(p5) {
  return {
    restrict: 'EA',
    scope: {
      sketch: '='
    link: function(scope, element, attrs) {
      var sketchObj = null;

      var destroySketch = function() {
        if(!sketchObj) {
        sketchObj = null;

      scope.$watch('sketch', function(sketch, oldSketch) {
        if(oldSketch) {
        if(sketch) {
          sketchObj = new p5(sketch, element[0]);

      scope.$on('$destroy', destroySketch);

View the repository for angular-p5.js here on GitHub.

I have a bunch of questions... And I'm open to any and all feedback about anything I didn't mention. Hit me with your best shot!

  1. Naming convention - is the module name okay, or should I just name it "p5"? Or something else? Is it accepted practice for a wrapper like this to be called "angular-*", or is that considered redundant?
  2. Is it weird to have a service and a directive with the same name? It seemed to make sense to me, since you can inject p5 into a controller or include <p5> in your template. And it seems to work... but is this sort of thing common?
  3. Does it cause any issues for sketch to be a function reference? (See: `$scope.mySketch.) This is a requirement of the p5 api. Again, this seems to work, but I'm not sure if this is common...
  4. Did I handle all the cases I need to handle for observing and cleaning up the bound sketch data? Does it look like I cleaned it up properly on change and destroy?
  5. Is using link exclusively appropriate for this implementation, or should I try to factor this into a directive controller?

Also I graciously welcome any feedback about the project itself... It's fairly lightweight at the moment. Anything on GitHub is fair game if someone wants to take a look - docs, examples, etc.

  • \$\begingroup\$ Also this is obviously my first post... please let me know if I should break this question up into a few smaller, focused questions... I can't tell if this large bullet-list is a good format for this site. \$\endgroup\$
    – wxactly
    Jan 7, 2015 at 5:18
  • \$\begingroup\$ Welcome to CodeReview, I hope you get some good answers! \$\endgroup\$
    – Abbas
    Jan 7, 2015 at 10:14


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.