an
v0.0.8
Published
Angular + NPM: Publish your AngularJS modules to npm
Downloads
297
Readme
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.
install
With npm do:
npm install anlicense
MIT