ng1-shift
Angular 1.5+ decorators for writing Angular2 like.
Last updated 2 years ago by z1bba .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng1-shift 
SYNC missed versions from official npm registry.

ng1-shift

bitHound Overall Score

Library allows you to write with Angular 2 syntax on Angular 1.5+. That will make your migration to Angular 2(or 4) more easier.

How to install?

npm i -S ng1-shift

Component

Decorator for class, which links class to component contoller. It also passes property template as a static component value.

Lifecycle hooks:

  • ngOnInit - links to $onInit
  • ngOnChanges - links to $onChanges
  • ngOnDestroy - links to $onDestroy
import {Component, Inject, Input} from "ng1-shift";
import {UserDeleteErrorEntity} from "../store/entity/user-delete-error";

@Component({
    template: `
        <h1>Place your template here</h1>
    `,
})
export class PlaygroundComponent implements ng.IController {
    ngOnInit() {
    }

    ngOnChanges() {
    }

    ngOnDestroy() {
    }
}

Equals to:

export class PlaygroundComponent implements ng.IController {
    static controller = PlaygroundComponent;
    static template = `
        <h1>Place your template here</h1>
    `;

    $onInit() {
    }

    $onChanges() {
    }

    $onDestroy() {
    }
}

Directive

Decorator for class, which links class to directive contoller. It also passes property selector as a directive selector.

Lifecycle hooks:

  • ngOnInit - links to $onInit
  • ngAfterViewInit - links to $postLink
  • ngOnChanges - links to $onChanges
  • ngOnDestroy - links to $onDestroy
import {Directive} from "ng1-shift";

@Directive({
    selector: `.ngClassDirective`,
})
export class PlaygroundDirective implements ng.IController {
    ngOnInit() {
    }

    ngAfterViewInit() {
    }

    ngOnChanges() {
    }

    ngOnDestroy() {
    }
}

Equals to:

export directiveInstance() {
    return {
        controller: PlaygroundDirective,
        restrict: "C"
    }
}

class PlaygroundDirective implements ng.IController {
    $onInit() {
    }

    $postLink() {
    }

    $onChanges() {
    }

    $onDestroy() {
    }
}

Input

Property decorator for bindings. Literary puts binding property name into static object bindings as one-way binding "<".

class DogComponent {
    @Input() name: string;
}

Equals to:

class DogComponent {
    static bindings = {
        name: "<"
    };

    name: string;
}

In order to setup two-way binding, you should add @Input for that property and @Output with 'Change' postfix property.

class DogComponent {
    @Input() name: string;
    @Output() nameChange = new EventEmitter();
}

Equals to:

class DogComponent {
    static bindings = {
        name: "=",
        nameChange: "&"
    };

    name: string;
    nameChange: Function;
}

Output

Property decorator for callback bindings. Literary puts binding property name into static object bindings as callback binding "&".

class CatComponent {
    @Output("onAliasCallback") onCallback: Function;
}

Equals to:

class CatComponent {
    static bindings = {
        onCallback: "&onAliasCallback"
    };

    onCallback: Function;
}

Inject

Parameter decorator for injection. Works a bit differ from @Inject in Angular 2. Just pushes specified injection into static property $inject.

class UserComponent {
    constructor(
        @Inject("userDataService") private userDataService: IUserDataService
    ) {
    }
}

Equals to:

class UserComponent {
    static $inject = ["userDataService"];

    constructor(private userDataService: IUserDataService) {
    }
}

Current Tags

  • 0.0.12                                ...           latest (2 years ago)

14 Versions

  • 0.0.12                                ...           2 years ago
  • 0.0.11                                ...           2 years ago
  • 0.0.10                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7-alpha.3                                ...           2 years ago
  • 0.0.7-alpha.2                                ...           2 years ago
  • 0.0.7-alpha.1                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 5
Dependencies (0)
None
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |