ES5上的Angular2 Http提供程序(不是TypeScript)
Angular2 Http Providers on ES5 (not TypeScript)
我正在开发一个应用程序,为了好玩,我正在玩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]);
});
相关文章:
- $q.all当输入数组中的一项不是promise时,Typescript检查器失败
- Typescript class.default 不是构造函数
- 为什么微软开发了一种名为Typescript的新语言,而不是创建C#到Javascript的转换程序
- Typescript坚持认为;不是模块”;
- ES5上的Angular2 Http提供程序(不是TypeScript)
- Typescript$inject$timeout到指令中..在控制器中工作,而不是在链接中
- 在原型中声明 TypeScript 成员,而不是添加到“this”中
- Laravel Elixir使用Typescript而不是Javascript
- 如何使用gulp在不同的文件中而不是在javascript文件中创建Typescript源映射
- 继承和 TypeScript 错误:X 不是构造函数类型
- 参数“[controllerName]”在转换为TypeScript时不是未定义的NaNunction
- Angular HTTP GET 与 TypeScript 错误 http.get(..).映射不是 [null] 中的
- AngularJS:TypeScript编译过程并吞噬uglify-是否有一种方法可以强制TS使用IIFE生成函数而不是
- 在typescript中一直使用.tsx而不是.ts有什么缺点吗
- Typescript类使用Interface作为类型而不是实现
- TypeScript TS7015:元素隐式地有'any'因为索引表达式不是'number
- Typescript '不是模块'错误
- 未捕获的typeError:不是TypeScript中私有方法的函数
- View不是Typescript下Backbone的构造函数
- ecmascript 5——在Angular 2中可以使用ES5 JavaScript而不是TypeScript吗?