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

我将VS2015与Gulp一起使用，并尝试使用TypeScript构建AngularJS

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

但是，如果我想引用我的控制器和任何其他服务-我如何避免在每个HTML文件中都放置相关的脚本标记-是否有一种方法可以引用app.js文件并完成它？推荐的方法是什么

---

干杯，

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

我使用了

实验性的typescript装饰程序
，
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'";
    }
}

import{DependsOn，AppStartup，ngControllerBase}来自“./infra/core”；
从“./directions/taskManagerDirective”导入{taskManagerDirective}；
@应用程序启动({
名称：“TodoSample”
}).控制员({
DependsOn:[taskManagerDirective]
})
将类导出到OlistController扩展ngControllerBase{
public ByControllerAs:string；
构造函数（）{
超级（参数）；
让$httpPromise=this.$get（$http”）；
$httpPromise.then（函数（$http）{
$http.get（'http://www.google.com）。成功（功能（正文）{
console.info（“google.com下载，源代码：”，正文）；
});
});
this.ByControllerAs=“这被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>
   `;
}

从“./infra/core”导入{DependsOn，ngDirectiveBase}；
从“/rowListItemDirective”导入{rowListItemDirective}”；
@DependsOn（[rowListItemDirective]）
导出类taskManagerDirective扩展了ngDirectiveBase{
公共模板：字符串=`
父指令
`;
}

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