Created
June 21, 2016 20:58
-
-
Save squadwuschel/c04c7a9a23628ca2b2e70eb5b1138b04 to your computer and use it in GitHub Desktop.
Example Angular 1.5 Component in TypeScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module App.Components { | |
/* | |
* Beschreibung ... | |
* | |
* Verwendung: | |
* | |
* <edit-user-cmp name="ctrl.name" test="ctrl.blubb></edit-user-cmp> | |
*/ | |
export class EditUserCmp implements ng.IComponentOptions { | |
public bindings: any; | |
public controller: any; | |
//public template: string; | |
public templateUrl: string; | |
public transclude: boolean; | |
constructor() { | |
this.bindings = { | |
name: "=", | |
test: "<" //One Way Binding | |
} | |
this.controller = EditUserCmpCtrl; | |
this.template = `<p><label ng-bind="$ctrl.name"></label><label ng-bind="$ctrl.test"></label></p>`; | |
//this.templateUrl = "/Templates/components/editUser.template.html"; | |
this.transclude = false; | |
} | |
//#region Angular Module Definition | |
private static _module: ng.IModule; | |
public static get module(): ng.IModule { | |
if (this._module) {return this._module;} | |
this._module = angular.module('editUserCmp', []); | |
this._module.component('editUserCmp', new EditUserCmp()); | |
return this._module; | |
} | |
//#endregion | |
} | |
/* | |
* Implementierung unseres EditUserCmp Controllers. | |
*/ | |
export class EditUserCmpCtrl { | |
public name: string; | |
public test: string; | |
static $inject: string[] = ["$element"]; | |
constructor(private $element) { } | |
public $onInit() { | |
console.log("Init Component"); | |
} | |
public $onChanges(changesObj) { | |
//geht nur mit OneWay Bindings "<" | |
console.log("Changed Obj: "); | |
console.log(changesObj); | |
} | |
public $postLink() { | |
console.log(this.$element); | |
} | |
public $onDestroy() { } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
how it will look if in the application two components? how to connect them through bindings?