sprang-angular-decorators v1.0.2
sprang-angular-decorators
Angular decorators for angular 1 inspired by ng-forward and java/spring annotations
Bootstrap
import { setModule, startAutowiring } from 'sprang-angular-decorators';
let dependencies = [
'ngMessages',
'ngAnimate'
];
setModule(angular.module('App', dependencies)
.run(['$injector', ($injector: ng.auto.IInjectorService) => {
startAutowiring($injector);
}])
);
angular.bootstrap(document.documentElement, ['App'], { strictDi: true });
@Autowired
Auto injection of services
import { MyService } from './../myService';
export class X {
@Autowired(()=>MyService)
private myService:MyService
@Autowired('$timeout')
private $timeout: ng.ITimeoutService;
constructor() {}
}
Notes:
- Angular native services are injected via there name as a string
- Custom angular services (decorated with @Service) are injected via a function returning corresponding class
@Service
Registers an angular service
@Service()
export class MyService {}
@Component
Registers an angular component
@Component({
selector:'my-component-selector' // '[my-component-selector]' for attribute selector
template?:string,
templateUrl?:string
... // and all other "classic" component config values
})
class MyComponent implements ng.ComponentLifeCycle {
constructor(){}
$onInit() {
}
$onChanges(changes:ng.Changes) {
}
$doCheck() {
}
$onDestroy() {
}
$postLink() {
}
}
Warning !!! $ctrl shall be used in templates => {{$ctrl.x}}
@Controller
Registers an angular controller
@Controller()
export class MyController {}
@NgElement
Auto injects components HTMLElement
@Controller()
export class MyComponentOnly {
@NgElement
private $element:ng.IAugmentedJQuery;
}
@NgAttrs
Auto injects component attributes (Input or BindString shall be prefered)
@Controller()
export class MyComponentOnly {
@NgAttrs
private $Attrs:ng.IAttributes;
}
@NgScope
Auto injects angular scope
@Controller()
export class MyComponentOrController {
@NgScope
private scope:ng.IScope;
}
@Input
@Component(...)
class X {
@Input() inputA;
@Input('customInputB') inputB;
$onChanges(changes:any) {
if(changes[inputA].previousValue !== changes[inputA].currentValue) {
...
}
}
}
<elt input-a="scopeVarA" custom-input-b="scopeVarB"></elt>
Any modification of scopeVarA and scopeVarB values will be reported respectively on inputA and inputB (but only in this direction)
Modification can be watch via $onChanges lifecycle method
@Output
@Component(...)
@Inject('$element')
class X {
@Output() outputA = new OutputEmitter('outputA',this);
@Output('customOutputB') outputB = new OutputEmitter('outputB',this);
constructor(private $element:ng.IAugmentedJQuery) {}
... {
this.outputA.emit('john');
this.outputB.emit({name:'doe'})
}
}
<elt (output-a)="handlera($event)" (custom-output-b)="handlerb($event)"></elt>
scope.handlera=(e)=>{console.log(e)} // -> 'john'
scope.handlerb=(ev)=>{console.log(ev)} // -> {name:'doe'}
Note: all native events are also available click, mouseover... with (...)="" syntax. e.g: (click)="clickHandler($event)"
@BindString
@Component(...)
class X {
@BindString() stringA;
@BindString('customStringB') stringB;
}
<elt string-a="john" custom-string-b="doe"></elt>
Will set
stringA with "john" stringB with "doe"
@Require
@Component(...)
class X {
Require('ngModel') modelCtrl;
}
<elt ng-model="scopeVar"></elt>
@Filter
@Filter('filterName')
class X {
filter(...):any {
return ...;
}
}
@SnabbComponent
@SnabbComponent
export class SComponentName extends SnabbdomComponent<Props> {
constructor() {
super();
}
protected view() {
...
}
...
}
@NgEventBus
Annotate class that implements event bus
@NgEventBus
export class MyBus {
...
}
@ListenBus()
export class MyComponent {
...
@ListenBus(()=>MyEvent)
protected myMethod(data:MyEventData) {
...
}
}
myMethod will be called each time MyEvent is fired by class annotated with @NgEventBus. ListenBus decorator will automatically unregister bus listener when component is destroyed.