How to create an AngularJs directive in one node package, and then include it in another node package for the app?

Question

How to create an AngularJs directive in one node package, and then include it in another node package for the app?

If I have a directive, and I wish to package it in its own node package; and then include it from another another node package containing the main angularjs app, how would I do this?

My rough idea about how to go about this is:

put the html, javascript, and css for the directive in the package folder
enable compilation of these assets - preprocessing, minification (how?)
configure as bower package
in the app folder install the bower package
- how to do this locally, without publishing?
in the angular.module() statement that creates the main app, add the name of the module containing the directive

Is this correct? Have I missed out on anything?

javascript
node.js
angularjs
module
bower

Answer 1

Your idea of how to go about this looks good to me. To answer your questions in the list:

Look at Grunt or Gulp for your preprocessing / minification needs. These are both excellent build tools. Grunt is more widely used, but Gulp is newer and gaining a lot of ground. I'd look at both and use the one that suits you.

How to use a local bower dependency w/o publishing: In your main app's bower.json file, instead of putting a version number for your module, put the folder where it can be found on your local system, like so:

{
  "dependencies": {
    "my-module": "/home/me/modules/my-module"
  }
}

To clarify, you refer to it as a "node package" in your question, but in reality, you are creating a Bower package. Node packages (published to npmjs.org) are for node, and unless processed with something like Browserify, won't run in the browser (and even then, the node package can't do anything the browser doesn't support, like file access.) Bower packages (published on bower.io) are specifically for the browser. You will however find packages that publish to both NPM & Bower, such as jQuery or underscore, but you can't use the npm jquery package in the browser, it's built to run in node, and vice-a-versa.