ngmin is an AngularJS application pre-minifier. The goal is ultimately to use this alongside yeoman and grunt to make developing and building Angular apps fast, easy, and fun.
Turns this
angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });
into
angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
so that minifiers can handle AngularJS's DI annotations and you can save a few keystrokes.
Install via npm:
npm install -g ngmin
ngmin
is available for Rails via ngmin-rails
.
ngmin
is available for Clojure Ring via optimus-angular
as an Optimus
asset middleware.
Ideally, you should concat all of your files, then run ngmin
once on the concatenated file.
ngmin somefile.js somefile.annotate.js
From here, the annotated file(s) to a minifier.
ngmin
also accepts stdio. The following is the same as above:
ngmin < somefile.js > somefile.annotate.js
ngmin
does not currently attempt to be fully generalized, and might not work if you're too clever. If you follow these conventions, which are the same as what the AngularJS Yeoman generator defaults, you should be fine.
// like this
angular.module('myModuleName', ['dependOnThisModule']);
// like this
angular.module('myModuleName').controller('MyCtrl', function ($scope) {
// ...
});
This should work for all injectable APIs.
// like this
angular.module('myModuleName').service('myService', function ($scope) {
// ...
});
You can methods like this, and ngmin
should still work fine:
// like this
angular.module('myModuleName').
service('myFirstService', function ($scope) {
// ...
}).
service('mySecondService', function ($scope) {
// ...
});
This works with all injectable APIs.
This is not the preferred way of dealing with modules, and thus support for it isn't completely comprehensive. Something like this will work:
var myMod = angular.module('myMod', []);
myMod.service('myService', function ($scope) {
// ...
});
But something like this will probably fail spectacularly:
var myMod = angular.module('myMod', []);
var mod1, mod2, mod3;
mod1 = myMod;
mod3 = (function () {
return mod2 = mod1;
}());
mod3.service('myService', function ($scope) {
// ...
});
Please don't write code like the second example. :)
AngularJS's DI system inspects function parameters to determine what to inject:
// angular knows to inject "myService" based on the parameter in "myFactory"
someModule.factory('myFactory', function (myService) {
// ...
});
AngularJS does this for Module#controller
, Module#service
, Module#factory
, etc. Check out the developer guide on DI for more info.
JavaScript minifiers rename function parameters. The code above, when minified, might look like this:
// the "myService" parameter has been renamed to "a" to save precious bytes
someModule.factory('myFactory', function (a) {
// ...
});
To overcome this, AngularJS has a "minifier-safe inline" notation (see Inline Annotation in the docs) that annotates angular.controller
, angular.service
, angular.factory
with an array of dependencies' names as strings:
// angular knows to inject "myService" based on the parameter in "myFactory"
someModule.factory('myFactory', ['myService', function (myService) {
// ...
}]);
So with this notation, when minified, still includes the correct dependency names even if the function arguments are re-written:
someModule.factory('myFactory', ['myService', function (a) {
// minified variable "a" will represent "myService"
// ...
}]);
Writing the "minifier-safe" version by hand is kind of annoying because you have to keep both the array of dependency names and function parameters in sync.
If a library is not supported by ngmin it is possible to extend the annotation system by using annotation modules. These modules must be prefixed with astral-angular-annotate-
. When installing such a module (preferred as devDependency
) ngmin with automatically pick up the module and apply them to your code.
If your library is not supported by any annotation module you can create your own one. For usage you need to make sure your plugin package name is prefixed with astral-angular-annotate-
and exports an function with the following signature:
module.exports = function (astral) {
// Your annotation code
};
For further information see the following annotation modules:
MIT