babel-plugin-angular-annotate

Make angular dependency annotation minification proof

Compatibility

The version 2.x uses babel 6.x plugin API, for babel 5.x versions use the babel-plugin-angular-annotate 1.x

Installation

npm install babel-plugin-angular-annotate

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    ["angular-annotate", [configurations...]]
  ]
}

Via CLI

$ babel --plugins angular-annotate script.js

Via Node API

require("babel-core").transform("code", {
  plugins: [
    ["angular-annotate", [configurations...]]
  ]
});

Known issues

• Some injections wont work properly when using this plugin in conjuction with babel-preset-es2015. To get it working you need to use "passPerPreset": true in your .babelrc.

Configuration

angular-annotate accepts a json like injection configuration starting with an array containing two items in this format: [method call, args].

method call is expressed as a string with the service name and method call. For instance "$injector.invoke". You can also nest calls. For instance: "$httpProvider.interceptors.push".

args is where you map each param with the corresponding injection strategy. The two possible are: "$injectFunction" and "$injectObject". Any other value will be ignored.

$injectFunction will transform:

function (a, b, c) {
}

to

['a', 'b', 'c', function (a, b, c) {
}]

For instance to create a rule for $injector.invoke you can apply the following configuration: ["$injector.invoke", ["$injectFunction"]].

So the following will be transformed:

Before:

$injector.invoke(function($state) {
  $state.go('somewhere');
});

After:

$injector.invoke(['$state', function($state) {
  $state.go('somewhere');
}]);

$injectObject will apply $injectFunction for each object value. This is mainly used in the resolve property from some services. For example:

The $routeProvider.when configuration can be expressed with the following:

["$routeProvider.when", ["_", {
  "controller": "$injectFunction",
  "resolve": "$injectObject"
}]];

Before:

$routeProvider.when('/foo', {
  controller: function($scope) {
    $scope.message = 'foo';
  },
  templateUrl: 'foo.html',
  resolve: {
    store: function (foo) {
    }
  }
});

After:

$routeProvider.when('/foo', {
  controller: ['$scope', function($scope) {
    $scope.message = 'foo';
  }],
  templateUrl: 'foo.html',
  resolve: {
    store: ['foo', function (foo) {
    }]
  }
});

Note that since we don't want to do anything in the routeName we use a "_" to ignore it.

Presets

Since configuring each service injection can be tedius, this libray includes some presets like: "angular", "ngMaterial", "ngRoute" and "ui.router". So you can simple include the following in .babelrc:

{
  "plugins": [
    ["angular-annotate", ["angular", "ngMaterial", "ui.router"]]
  ]
}

Check the main file to see what injections are currently handled.

Running Tests

npm test

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request