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.