Was ist die beste Vorgehensweise zum Erstellen einer AngularJS 1.5-Komponente in Typescript?

Question

Ich experimentiere mit der .component() Syntax in Angular 1.5.

Es scheint, dass die neueste Mode ist, den Controller in-line in der Komponente eher als in einer separaten Datei zu codieren, und ich kann den Vorteil davon sehen, vorausgesetzt, dass die Komponente Boilerplate minimal ist.

Das Problem ist, dass ich meine Controller als Typoskript-Klassen codiert habe und dies auch weiterhin tun möchte, weil das mit Angular2 übereinstimmt.

Meine beste Anstrengung ist so etwas wie dieses:

export let myComponent = { 
    template: ($element, $attrs) => { 
    return [ 
     `<my-html>Bla</my-html>` 
    ].join('') 
    }, 
    controller: MyController 
}; 
class MyController { 

} 

Es funktioniert, aber es ist nicht elegant. Gibt es einen besseren Weg?

Answer 1

ich folgendes Muster ist mit Winkel 1.5 verwenden component mit Typoskript

class MyComponent { 
    model: string; 
    onModelChange: Function; 

    /* @ngInject */ 
    constructor() { 
    } 

    modelChanged() { 
     this.onModelChange(this.model); 
    } 
} 

angular.module('myApp') 
    .component('myComponent', { 
     templateUrl: 'model.html', 
     //template: `<div></div>`, 
     controller: MyComponent, 
     controllerAs: 'ctrl', 
     bindings: { 
      model: '<', 
      onModelChange: "&" 
     } 
    }); 

Answer 2

Ich war mit der gleichen Frage zu kämpfen und meine Lösung in diesem Artikel setzen:

http://almerosteyn.github.io/2016/02/angular15-component-typescript

module app.directives { 
 

 
    interface ISomeComponentBindings { 
 
    textBinding: string; 
 
    dataBinding: number; 
 
    functionBinding:() => any; 
 
    } 
 

 
    interface ISomeComponentController extends ISomeComponentBindings { 
 
    add(): void; 
 
    } 
 

 
    class SomeComponentController implements ISomeComponentController { 
 

 
    public textBinding: string; 
 
    public dataBinding: number; 
 
    public functionBinding:() => any; 
 

 
    constructor() { 
 
     this.textBinding = ''; 
 
     this.dataBinding = 0; 
 
    } 
 

 
    add(): void { 
 
     this.functionBinding(); 
 
    } 
 

 
    } 
 

 
    class SomeComponent implements ng.IComponentOptions { 
 

 
    public bindings: any; 
 
    public controller: any; 
 
    public templateUrl: string; 
 

 
    constructor() { 
 
     this.bindings = { 
 
     textBinding: '@', 
 
     dataBinding: '<', 
 
     functionBinding: '&' 
 
     }; 
 
     this.controller = SomeComponentController; 
 
     this.templateUrl = 'some-component.html'; 
 
    } 
 

 
    } 
 

 
    angular.module('appModule').component('someComponent', new SomeComponent()); 
 

 
}

Answer 3

Dies ist das Muster, das ich verwenden:

ZippyComponent.ts

import {ZippyController} from './ZippyController'; 

export class ZippyComponent implements ng.IComponentOptions { 

    public bindings: { 
     bungle: '<', 
     george: '<' 
    }; 
    public transclude: boolean = false; 
    public controller: Function = ZippyController; 
    public controllerAs: string = 'vm'; 
    public template: string = require('./Zippy.html'); 
} 

ZippyController.ts

export class ZippyController { 

    bungle: string; 
    george: Array<number>; 

    static $inject = ['$timeout']; 

    constructor (private $timeout: ng.ITimeoutService) { 
    } 
} 

Zippy.html

<div class="zippy"> 
    {{vm.bungle}} 
    <span ng-repeat="item in vm.george">{{item}}</span> 
</div> 

main.ts

import {ZippyComponent} from './components/Zippy/ZippyComponent'; 

angular.module('my.app', []) 
    .component('myZippy', new ZippyComponent()); 

Answer 4

ich ein einfaches Typoskript Dekorateur bin mit der Komponente

function Component(moduleOrName: string | ng.IModule, selector: string, options: { 
    controllerAs?: string, 
    template?: string, 
    templateUrl?: string 
}) { 
    return (controller: Function) => { 
    var module = typeof moduleOrName === "string" 
     ? angular.module(moduleOrName) 
     : moduleOrName; 
    module.component(selector, angular.extend(options, { controller: controller })); 
    } 
} 

so dass es wie dieses Ich

@Component(app, 'testComponent', { 
    controllerAs: 'ct', 
    template: ` 
    <pre>{{ct}}</pre> 
    <div> 
     <input type="text" ng-model="ct.count"> 
     <button type="button" ng-click="ct.decrement();">-</button> 
     <button type="button" ng-click="ct.increment();">+</button> 
    </div> 
    ` 
}) 
class CounterTest { 
    count = 0; 
    increment() { 
    this.count++; 
    } 
    decrement() { 
    this.count--; 
    } 
} 

erstellen

Sie können versuchen, verwenden können ein funktionierender Jsbin hier http://jsbin.com/jipacoxeki/edit?html,js,output

Answer 5

Wenn Sie einen Winkel 2 Ansatz vollständig übernehmen wollen, könnten Sie verwenden:

module.ts

import { MyComponent } from './MyComponent'; 

angular.module('myModule', []) 
    .component('myComponent', MyComponent); 

MyComponent.ts

import { Component } from './decorators'; 

@Component({ 
    bindings: { 
    prop: '<' 
    }, 
    template: '<p>{{$ctrl.prop}}</p>' 
}) 
export class MyComponent { 

    prop: string; 

    constructor(private $q: ng.IQService) {} 

    $onInit() { 
    // do something with this.prop or this.$q upon initialization 
    } 
} 

decorators.ts

/// <reference path="../typings/angularjs/angular.d.ts" /> 

export const Component = (options: ng.IComponentOptions) => { 
    return controller => angular.extend(options, { controller }); 
}; 

Answer 6

würde ich vorschlagen, nicht kundenspezifische Lösungen zu verwenden, aber die ng-metadata Bibliothek stattdessen zu verwenden. Sie finden es unter https://github.com/ngParty/ng-metadata. So ist Ihr Code am besten mit Angular 2 kompatibel. Und wie in der Readme-Datei angegeben ist es

No hacks. No overrides. Production ready.

Ich wechselte kurz nach einer maßgeschneiderten Lösung aus den Antworten hier verwendet wird, aber es ist einfacher, wenn Sie diese Bibliothek sofort nutzen. Andernfalls müssen Sie alle kleinen Syntaxänderungen migrieren. Ein Beispiel dafür wäre, dass die anderen Lösungen hier die Syntax

@Component('moduleName', 'selectorName', {...}) 

während Angular 2 verwendet

@Component({ 
    selector: ..., 
    ... 
}) 

Also, wenn Sie nicht ng-metadata sofort zu verwenden, werden Sie erheblich erhöhen den Aufwand für die Migration Ihre Codebasis später.

Ein vollständiges Beispiel für die beste Praxis eine Komponente schreiben die folgende wäre:

// hero.component.ts 
import { Component, Inject, Input, Output, EventEmitter } from 'ng-metadata/core'; 

@Component({ 
    selector: 'hero', 
    moduleId: module.id, 
    templateUrl: './hero.html' 
}) 
export class HeroComponent { 

    @Input() name: string; 
    @Output() onCall = new EventEmitter<void>(); 

    constructor(@Inject('$log') private $log: ng.ILogService){} 

} 

(kopiert von ng-metadata recipies)

Answer 7

Ich glaube, ein guter Ansatz ist angular-ts-decorators zu verwenden. Mit ihm können Sie Komponenten in AngularJS wie folgt definieren:

import { Component, Input, Output } from 'angular-ts-decorators'; 

@Component({ 
    selector: 'myComponent', 
    templateUrl: 'my-component.html 
}) 
export class MyComponent { 
    @Input() todo; 
    @Output() onAddTodo; 

    $onChanges(changes) { 
     if (changes.todo) { 
     this.todo = {...this.todo}; 
     } 
    } 
    onSubmit() { 
     if (!this.todo.title) return; 
     this.onAddTodo({ 
     $event: { 
      todo: this.todo 
     } 
     }); 
    } 
} 

und dann registrieren Sie sie in Ihrem Modul:

import { NgModule } from 'angular-ts-decorators'; 
import { MyComponent } from './my-component'; 

@NgModule({ 
    declarations: [MyComponent] 
}) 
export class MyModule {} 

Wenn Sie ein Beispiel einer realen Anwendung, es überprüfen möchten, können Sie Überprüfen Sie this one.