This little collection of annotations and registry functions allows you to register directives, controllers and filter with annotations at your angular module.
This little collection of annotations and registry functions allows you to register directives, controllers and filter with annotations at your angular module.
You can find the Typescript version of this library here: https://github.com/marcj/angular-typescript-decorators
Using the DI of Angular with ecmascript 6 classes is usually a PITA. You have several ways to inject services:
static get $inject() { return ['$compile', '$http'] }
. This is ugly and nasty to write and doesn't work with sub classes.This annotation collection fixes this and provide you several annotations to register your dependencies, directives and filters.
import {registerControllerDecorator} from './registry';
var myApp = angular.module('myApp', []);
registerControllerDecorator(myApp); //this allows you to write ng-controller="es6/module/path/Controller"
// myapp/controller/MainController.js
import {Inject} from './annotations';
@Inject('$scope, $parse')
export default class MainController {
constructor($scope, $parse) {
}
}
<body ng-controller="myapp/controller/MainController">
</body>
import {registerModuleDirective} from './registry';
var myApp = angular.module('myApp', []);
import MyDirective from './directives/MyDirective';
registerModuleDirective(myApp, MyDirective);
// myapp/directives/MyDirective.js
import {Inject, InjectAsProperty, Directive} from './annotations';
@Inject('$compile, $http')
@InjectAsProperty('$q')
@Directive('myDirective', {
restrict: 'E',
scope: true,
require: '?^myDirective'
})
export default class MyDirective {
constructor($compile, $http) {
this.http = $http;
this.compile = compile;
}
link(scope, element, attributes, parentMyDirective) {
this.$q //now available through @InjectAsProperty
if (parentMyDirective) {
parentMyDirective.addChildren(this);
}
}
addChildren(myDirective) {
this.children.push(myDirective);
}
}
<my-directive>
<my-directive></my-directive>
</my-directive>
When you have sub classes where the parent class has dependencies defined you don't need to know or write those dependencies on your class again.
@Inject('$compile')
class Animal {
constructor($compile) {}
}
@Inject('$http')
class Tiger extends Animal {
constructor($compile, $http) {
super($compile);
this.$http = $http;
}
}
//or
@InjectAsProperty('$http')
class Snake extends Animal {
link(scope, element, attributes){
this.$http.get(...);
}
}