使用 AngularJS 和 TypeScript 以简单的方式引用答案

【问题标题】：Referencing in a simple way using AngularJS and TypeScript使用 AngularJS 和 TypeScript 以简单的方式引用
【发布时间】：2016-04-02 14:48:53
【问题描述】：

我正在使用 VS2015 和 Gulp，我正在尝试使用 TypeScript 构建 AngularJS。

在我的 index.html 中，我的“app.js”（TS 构建的输出和包）有一个脚本标记。

但是，如果我想引用我的控制器和任何其他服务 - 我怎样才能避免将相关的脚本标签放在每个 HTML 文件中 - 有没有办法我可以引用 app.js 文件并成为完成了吗？推荐的方法是什么？

干杯，

【问题讨论】：

标签： javascript angularjs visual-studio typescript

【解决方案1】：

如果你想通过 script 标签只引用 html 中的一个文件，而其他文件只是在其他 js 文件中引用，那么你可以使用requirejs。这是一个加载脚本的好工具。在生产环境中，这是连接和缩小所有脚本以减少请求数量的好方法。

【讨论】：

【解决方案2】：

我设法通过experimental typescript decorators、requirejs 和一点想象力解决了这个问题。

所以，在简历中我写了两个装饰器，一个叫AppStartup，另一个叫DependsOn。所以在 angular bootstrap 中，我可以获取并注册所有依赖项。

我最终得到了类似的东西：

TodoListController.ts

import {DependsOn, AppStartup, ngControllerBase} from "../infra/core";
import {taskManagerDirective} from "../directives/TaskManagerDirective";

@AppStartup({
    Name: "TodoSample"
}).Controller({
    DependsOn: [taskManagerDirective]
})
export class TodoListController extends ngControllerBase {
    public ByControllerAs: string;

    constructor() {
        super(arguments);

        let $httpPromise = this.$get<ng.IHttpService>("$http");

        $httpPromise.then(function ($http) {
            $http.get('http://www.google.com').success(function (body) {
                console.info("google.com downloaded, source code: ", body);
            });
        });

        this.ByControllerAs = "This was included by controllerAs 'this'";
    }
}

rowListItemDirective.ts

import {DependsOn, ngDirectiveBase} from "../infra/core";
import {rowListItemDirective} from "./RowListItemDirective";

@DependsOn([rowListItemDirective])
export class taskManagerDirective extends ngDirectiveBase{
    public template: string = `
    Parent Directive
        <table>
            <tbody>
                <tr row-list-item-directive></tr>
            </tbody>
        </table>
   `;
}

您可以在下面的 github 存储库中看到我所做的：

https://github.com/klaygomes/angular-typescript-jasmine-seed

【讨论】：