Question

我正在开发一款应用程序，我正在玩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（RxJS，es6垫片，polyfills等）定义的其他js要求。

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

;(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选项能够满足现在的要求，直到我有时间找出所有的复杂问题

如果需要更多信息，请与我们联系;我很乐意给它。

Answer 1

更改您的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行）中删除，并在ng.http.HTTP_PROVIDERS添加bootstrap()，如下所示：

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

ES5上的Angular2 Http提供程序（不是TypeScript）

1 个答案: