ES5上的Angular2 Http提供程序(不是TypeScript)

Angular2 Http Providers on ES5 (not TypeScript)

本文关键字:不是 TypeScript 程序 上的 Angular2 Http ES5      更新时间:2023-10-28

我正在开发一个应用程序,为了好玩,我正在玩Angular2。我正在使用ES5 JavaScript,我现在的问题是如何访问Http服务?所有可用的文档都是TypeScript(这没有帮助),或者是Angular2的alpha版本,此后系统发生了变化。

我使用的是Angular2 2.0.0-beta.13版本。我收到以下错误:TypeError: ng.http.get is not a function in [null]。我尝试过使用ng.http.Http.get,但没有成功。我在头部中包含了angular2-all.umd.js,以及angular.io定义的其他js要求(RxJS、es6垫片、polyfill等)。

以下是我的代码片段,供参考。为了便于阅读,所有文件都连接在一起。

;(function (app, ng) {
    app.CommandService = (function () {
        var CommandService = function () {
            this.url = 'api/commands';
        };
        CommandService.prototype.all = function () {
            return ng.http.get(this.url)
                .map(function (response) {
                    return response.json().data;
                })
                .catch();
        };
        return CommandService;
    })();
})(window.app || (window.app = {}), window.ng);
;(function (app, ng) {
    app.CommandComponent = (function () {
        function CommandComponent(commandService) {
            this.commandService = commandService;
            this.commands       = [];
        }
        CommandComponent.parameters  = [
            app.CommandService
        ];
        CommandComponent.annotations = [
            new ng.core.Component({
                selector:    '#command-listing',
                templateUrl: 'api/templates/commands/listing',
                providers: [
                    app.CommandService,
                    ng.http.HTTP_PROVIDERS
                ]
            })
        ];
        CommandComponent.prototype.all      = function () {
            var self = this;
            this.commandService.all().subscribe(
                function (commands) {
                    self.commands = commands;
                }, function (error) {
                    self.error = error;
                }
            );
        };
        CommandComponent.prototype.ngOnInit = function () {
            this.all();
        };
        return CommandComponent;
    })();
})(window.app || (window.app = {}), window.ng);
;(function (app, ng) {
    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.CommandComponent);
    });
})(window.app || (window.app = {}), window.ng);

从时间的角度来看,TypeScript似乎不是一个可行的选择。我试着根据需要设置环境,在调试了一整天的TS问题后,我现在遇到了SystemJS问题,所以我希望纯JS选项现在就足够了,直到我有时间弄清楚所有的复杂性。

如果需要更多信息,请告诉我;我很乐意给你。

更改CommandService:

;(function (app, ng) {
    app.CommandService = (function () {
        var CommandService = function (http) {           // this line changed
            this.url = 'api/commands';
            this.http = http;                            // this line added
        };
        CommandService.parameters  = [                   // this line added
            ng.http.Http // this will be passed as arg in the constructor
        ];                                               // this line added
        CommandService.prototype.all = function () {
            return this.http.get(this.url)               // this line changed
                .map(function (response) {
                    return response.json().data;
                })
                .catch();
        };
        return CommandService;
    })();
})(window.app || (window.app = {}), window.ng);

参见plunker:http://plnkr.co/edit/4FG1Lrt7Yhnzo20azV8Z?p=preview

作为附加信息,您可以从CommandComponent中删除(app/main.js的第41行),并在bootstrap()中添加ng.http.HTTP_PROVIDERS,如下所示:

document.addEventListener('DOMContentLoaded', function () {
    ng.platform.browser.bootstrap(app.CommandComponent, [ng.http.HTTP_PROVIDERS]);
});