在其他文件中设置 ng.IModule 控制器

Question

我有以下 JavaScript，我想将其转换为 TypeScript，但我删除了 :(

JS

var app = angular.module('app', []);
app.config([...]);
app.run([...];

(function (ng, app) {
  app.controller('appCtrl', [..., function(...)])
})(angular, app);

这就是我目前所知道的。

TS

文件 1:

/// <reference path="../Scripts/typings/angularjs/angular.d.ts" />
module App {
    "use strict";
    var mod:ng.IModule = angular.module(name, []);
}

文件 2：

/// <reference path="../Scripts/typings/angularjs/angular.d.ts" />
module App {
    'use strict';
    export interface IAppCtrlScope extends ng.IScope {
        greeting: string;
        changeName(name): void;
    }
    export class AppCtrl {
        public static $inject = [
            '$scope'
        ];
        constructor(private $scope: IAppCtrlScope) {
            $scope.greeting = 'asdf';
            $scope.changeName = (name) => {
                $scope.greeting = 'Hello ' + name + ' !';
            }
        }
    }
    mod.controller('appCtrl', AppCtrl); // this doesn't work
}

之所以在定义控制器的文件中执行 mod.controller('appCtrl', AppCtrl) 是因为它更容易维护。

Answer 1

我会使用 class 作为控制器。请参阅 https://youtube.com/watch?v=WdtVn_8K17E&hd=1 示例。

Answer 2

所以解决方案真的很简单。我所要做的就是导出变量。

module Application {
    'use strict';
    export var angularApp: ng.IModule = angular.module("app", []);
}

module Application {
    'use strict';
    export interface IAppCtrlScope extends ng.IScope {
        greeting: string;
        changeName(name): void;
    }
    export class AppCtrl {
        public static $inject = [
            '$scope'
        ];
        constructor(private $scope: IAppCtrlScope) {
            $scope.greeting = 'asdf';
            $scope.changeName = (name) => {
                $scope.greeting = 'Hello ' + name + ' !';
            }
        }
    }
    angularApp.controller('appCtrl', AppCtrl)
}

在其他文件中设置 ng.IModule 控制器

Setup ng.IModule controller in other files

javascript

angularjs

typescript