This little collection of annotations and registry functions allows you to register directives, controllers and filter with annotations at your angular module.
Using the DI of Angular with ecmascript 6 classes is usually a PITA. You have several ways to inject services:
- Use normale constructor signature angular can read. This doesn't work when you minify your scripts and thus rename all variables.
- Use
static get $inject() { return ['$compile', '$http'] }. This is ugly and nasty to write and doesn't work with sub classes. - Define its dependencies in the module.directive(), module.controller() method call with the array syntax. With this you have two places to change when you change dependencies and it doesn't work well with sub classes as you have to define your parent dependencies there as well.
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(...);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent