An NPM | npm.io

Angular + npm

Build angular 1.x apps with power of npm modules.

usage

To start using an just replace angular.{controller|directive|...}('name', fn) with: module.exports = require('an').{controller|...}('name', fn)

Then in your main file where you bootstrap angular application:

var app = angular.module('yourModule', [/* your regular deps */]);
// flush all registered modules:
require('an').flush(app);

Demo

// controller.js
module.exports = require('an').controller('AppCtrl', function($scope) {
  $scope.message = 'Hello World';
});

// app.js
require('./controller.js'); // just make sure the controller is registered

var app = angular.module('myApp', []);
// flush controller into app:
require('an').flush(app);

// this is equivalent to:
// app.controller('AppCtrl', function() {...});

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body ng-controller='AppCtrl'>
    <h1>{{message}}</h1>
    <script src='bundle.js'></script>
</body>
</html>

See demo folder for the same code. Browserified output of the demo folder (browserify ./demo/app.js > ./demo/bundle.js) can be found here: https://anvaka.github.io/an/demo

How?

The idea is simple: avoid using angular.module in npm package, and delay directives registration up to the point when application is bootstrapped.

E.g. instead of doing:

  var myModule = angular.module(???, []);
  myModule.directive(???, function myDirective() {/* */});

Do:

  require('an').directive(function myDirective() {});

When you ready to bootstrap application, collect all directives and register them in your main application module:

  require('an').flush();

Drawbacks

This approach is still not perfect and requires certain discipline to not forget register your directives via an. I can also see potential problems with names collision, versioning (especially when an itself is updated). This module is really simple at the moment, and maybe there is a better way of sharing angular directives on npm.

Please let me know.