mchmielarski / babel-plugin-ng-annotate Goto Github PK

License: MIT License

JavaScript 100.00%

babel-plugin-ng-annotate's Introduction

babel-plugin-ng-annotate - babel 6.x

How to install

$ npm install --save-dev babel-plugin-ng-annotate

Note: this library depends on the syntax decorators plugin for parsing. Simply $ npm install --save-dev babel-plugin-syntax-decorators and follow the setup instructions below.

How to setup

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["syntax-decorators", "ng-annotate"]
}

How to use

@Inject('service1', 'service2', 'service3')
class MyController {

    constructor() {
        this.service1();
    }

    method() {
        this.service2();
    }

    anotherMethod() {
        this.service3();
    }
}

angular.controller('MyController', MyController);

babel-plugin-ng-annotate's People

Contributors

Stargazers

Watchers

Forkers

janusnic robertoua legendar evenfrost 3dhubs 632781460

babel-plugin-ng-annotate's Issues

Cannot read property 'callee' of undefined

ERROR in ./client/app/components/newPersonalOrders/newPersonalOrders.controller.js
Module build failed: TypeError: /Users/chino/Documents/dsf/dsf.angular/client/app/components/newPersonalOrders/newPersonalOrders.controller.js: Cannot read property 'callee' of undefined
    at /Users/chino/Documents/dsf/dsf.angular/node_modules/babel-plugin-ng-annotate/lib/index.js:53:38
    at Array.forEach (native)
    at PluginPass.ClassDeclaration (/Users/chino/Documents/dsf/dsf.angular/node_modules/babel-plugin-ng-annotate/lib/index.js:45:17)

while using the following .babelrc and "babel-plugin-ng-annotate": "^0.2.3",:

{
  "plugins":[
    "add-module-exports",
    "ng-annotate",
    "syntax-decorators",
    "transform-node-env-inline",
    "transform-runtime"
  ],
  "presets":[
    "stage-0",
    "es2015"
  ]
}

any help would be appreciated.

Cheers

Does this work with function based modules?

... as opposed to class based.

@Inject('service1', 'service2');

function localFunction() {
  return "did something";
}

export default function() {
  service1.something();
  service2.somethingElse();
  localFunction();
}

... or directive controllers?

@Inject('service1', 'service2');
function controller() {
  service1.something();
  service2.somethingElse();
}

export default function() {
  return {
    restrict: 'E',
    template: templates['myTemplate'],
    controller: controller
  };
}

'this' is not allowed before super()

Browserify Error occures when trying to use @Inject with constructor super(),

for example:

@Inject('$attrs', '$http', '$cookies')
class BarCtrl extends FooCtrl {
    constructor() {
        super();
        //...
    }
    //...
}

Webpack support

Hey could we get support for webpack?

 { test: /\.js$/, exclude: /node_modules|bower_components/, loader: 'babel', query: { presets: ['es2015', 'stage-0'], plugins: ['ng-annotate', 'add-module-exports', 'transform-runtime'] } }

ERROR in ./scripts/scripts.js
Module build failed: TypeError: Plugin is not a function

Cannot @Inject

When I try to @Inject a service in my directive and recompile it, Babel throws Decorators are not supported yet in 6.x pending proposal update.. The issue here. My gulp Babel config is:

babel: {
  presets: ['es2015', 'stage-1'],
  plugins: ['syntax-decorators', 'ng-annotate'],
  babelrc: false,
},

At the other hand, when adding decorators-legacy plugin in Babel config, browser console throws an Inject is not defined error.

I think the README could be improved to make it simpler to understand what exactly this babel plugin does, without needing to download it and try it out.
Consider adding an example of what the class in the README looks like after transormation by the plugin.

Thank you!

does not work with anonymous function

// config.js
export default function ($stateProvider) {
  'ngInject'
  ...
}

import config from './config'

angular.module('app', []).config(config)

Could you please show an example for 'extends' with @Inject?

I want to extend a class and inject again into it. Its parent class also should be able to get dependencies injected.

In your plugin
I guess it is just an 'if-check' to see if the class has a parent and to ".concat()" the $inject values instead of an assignment which overrides the $inject values of the parent.