angularjs - 如何将我的 javascript AngularJS 应用程序 Controller 转换为使用 Typescript？

Question

我已经添加了 AngularJS 定义。目前我的应用 Controller 看起来像这样:

app.controller('appController',
    [
        '$scope',
        '$state',
        'utilityService',
        appController
    ]);

function appController(
    $scope: ng.IScope,
    $state,
    utilityService
    ) {

    var app = this;

    $scope.broadcast = function (val) {
        $scope.$broadcast('broadcast', val);
    };

    if (app.auth.user.isAuthenticated()) {
        app.state.text = null;
        $state.transitionTo('home.content', { content: 'overview' });
    } else {
        $state.transitionTo('authentication');
        // app.auth.loginData = app.cache.get('loginData');
        app.state.text = "Please Login ...";
    }

} 

如果我想充分利用 TS，是否应该转换为一个类？如果是，我该如何处理广播函数等函数的定义？

Answer 1

原理是这样的

app.controller('appController', AppController);

interface AppControllerScope extends ng.IScope{
    vm: AppController; 
}

class AppController{

    text: string;

    static $inject=[
        '$scope',
        '$state',
        'utilityService'
    ]
    constructor(
    public $scope: AppControllerScope,
    public $state,
    public utilityService: UtilityService
    ) {
        $scope.vm = this; 

        // NOTE: unclear what app is, perhaps its a service?
        if (app.auth.user.isAuthenticated()) {
            this.text = null;
            $state.transitionTo('home.content', { content: 'overview' });
        } else {
            $state.transitionTo('authentication');
            // app.auth.loginData = app.cache.get('loginData');
            this.text = "Please Login ...";
        }
    }

    broadcast = (val) => {
        this.$scope.$broadcast('broadcast', val);
    };
} 

要点:

• 您可以使用 vm.something 从 View 访问 Controller 功能，例如ng-click="vm.broadcast('tada')"
• 也为服务使用类，例如utilityService 是 UtilityService 的一个实例，您可以获得类型安全。更多:https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

更多使用类作为 Controller 模式:https://www.youtube.com/watch?v=WdtVn_8K17E&hd=1