是否可以在 Angular 2 中使用 ES5 JavaScript 而不是 TypeScript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30689094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use ES5 JavaScript with Angular 2 instead of TypeScript?
提问by jordiburgos
Is it needed to learn TypeScript for Angular 2?
是否需要为 Angular 2 学习 TypeScript？
Can Angular 2 be used with plain JavaScript ?
Angular 2 可以与纯 JavaScript 一起使用吗？
Edit: I've seen that the languages used as ES6, ES7, Dart compile to JavaScript to be executed, but I haven't seen any reference to use ES5 JavaScript directly.
编辑：我已经看到用作 ES6、ES7、Dart 的语言编译为要执行的 JavaScript，但我还没有看到任何直接使用 ES5 JavaScript 的参考。
采纳答案by Oka
Yes, you can.
是的你可以。
Go read this guide. Pressing the ES5tab on the code examples will show you regular ES5 JavaScript, as apposed to TypeScript.
去阅读本指南。按ES5代码示例上的选项卡将向您显示常规 ES5 JavaScript，与 TypeScript 相关。
The API previewis, for obvious reasons, incomplete though. So you may not find the ES5 methods listed there yet, and some of it may change before release.
该API预览是，出于显而易见的原因，虽然不完整。所以你可能还没有找到列出的 ES5 方法，其中一些可能在发布之前发生变化。
Current example of Angular 2.0 main component in ES5.
ES5 中 Angular 2.0 主要组件的当前示例。
function AppComponent() {}
AppComponent.annotations = [
new angular.ComponentAnnotation({
selector: 'my-app'
}),
new angular.ViewAnnotation({
template: '<h1>My first Angular 2 App</h1>'
})
];
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
回答by Meligy
Yes.
是的。
Here are 2 simple components, written in different ways that Angular 2 supports when writing in JavaScript (EcmaScript 5):
这里有 2 个简单的组件，它们以不同的方式编写，Angular 2 在用 JavaScript (EcmaScript 5) 编写时支持：
(function() {
var HelloWorldComponent = function() {};
HelloWorldComponent.annotations = [
new ng.core.Component({
selector: 'hello-world',
template: '<h1>Hello Angular2!</h1>'
})
];
var HelloFlentApi = ng.core.Component({
selector: 'hello-fluent',
template: '<h1>Hello {{name}}!</h1>' + '<input [(ngModel)]="name">',
}).Class({
constructor: function() {
this.name = "Fluent API";
}
});
var AppComponent = ng.core.Component({
selector: 'company-app',
template: '<hello-world></hello-world>' +
'<hello-fluent></hello-fluent>',
directives: [HelloWorldComponent, HelloFlentApi]
}).Class({
constructor: function() {}
});
document.addEventListener("DOMContentLoaded", function() {
ng.platform.browser.bootstrap(AppComponent);
});
}());<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>
<company-app>
Loading ...
</company-app>I wrote a detailed explanation of the code here:
我在这里写了代码的详细解释：
Writing An Angular2 Component in Today's JavaScript (ES5) – Beta 0 Edition
使用当今的 JavaScript (ES5) 编写 Angular2 组件 – Beta 0 版
As the link says, this applies to Angular 2 Beta 0, which was released a few hours ago at the time of writing this answer.
正如链接所说，这适用于 Angular 2 Beta 0，它是在写这个答案时几个小时前发布的。
回答by Pat M
A simple way to write plain javascript es5 components:
一种编写普通 javascript es5 组件的简单方法：
(function() {
var MyComponent = ng.
Component({
selector: 'my-component'
})
.View({
templateUrl: 'my-component.html'
})
.Class({
constructor: function () {
this.someArray = [];
},
someCustomFunction: function(item) {
this.someArray.push(item);
...
}
})
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(MyComponent);
});
})();
Here is a simple todo list demousing Javascript es5.
这是一个使用 Javascript es5的简单待办事项列表演示。
回答by jbandi
Angular 5 dropped support for plain ES5.
Angular 5 放弃了对普通 ES5 的支持。
See the following commit and comment on GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d
在 GitHub 上查看以下提交和评论：https: //github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d
回答by Johnf39
Below is another example in Plain Javascript based on the Angular2 "Tour of Heroes". It is the copy of the DashboardComponent that you can find in the Angular2 tutorial (you can find the full Angular2 tutorial in Plain Javascript here http://programming.sereale.fr):
下面是另一个基于 Angular2“英雄之旅”的纯 Javascript 示例。它是您可以在 Angular2 教程中找到的 DashboardComponent 的副本（您可以在http://programming.sereale.fr 处找到纯 Javascript 中的完整 Angular2 教程）：
//= require services/heroes-service
var DashboardComponent = ng.core.Component({
template: "<h3>Top Heroes</h3> \
<div class='grid grid-pad'> \
<div *ngFor='#hero of heroes' (click)='gotoDetail(hero)' class='col-1-4' > \
<div class='module hero'> \
<h4>{{hero.name}}</h4> \
</div> \
</div> \
</div>"
}).Class({
constructor: [
HeroService, ng.router.Router, ng.http.Http, function(heroService, router, http) {
this._heroService = heroService;
this._router = router;
this._http = http;
}
],
ngOnInit: function() {
//we get the list from mock-heroes.js
//this._heroService.getHeroes.then(heroes => this.heroes = heroes.slice(1,5))
//we get the list from the server
this._heroService.getHeroes(this._http).subscribe(heroes => this.heroes = heroes.slice(1,5));
},
gotoDetail: function(hero) { this._router.navigate(['HeroDetail', { id: hero.id }]); }
});
回答by Pascal Precht
TypeScript will be just a superset of ES6. And ES6 is a superset of ES5. Which means, ES5 is valid TypeScript and ES6 after all. Despite some specific features, for now a lot of what we get from those languages is syntactic sugar.
TypeScript 只是 ES6 的超集。而 ES6 是 ES5 的超集。这意味着，ES5 毕竟是有效的 TypeScript 和 ES6。尽管有一些特定的功能，但目前我们从这些语言中获得的很多东西都是语法糖。
Here's an article that shows you how to write Angular 2 code in ES5.
这是一篇文章，向您展示了如何在 ES5 中编写 Angular 2 代码。
回答by RtmY
@jordiburgos Is it needed to learn TypeScript for Angular 2?It is the recommended language by the angular team, and i can say from personal experience, that using es5 in a medium to large projects can be very hard to maintain over time because of its lack of key features like typing, classes and inheritance.
@jordiburgos 是否需要学习 Angular 2 的 TypeScript？它是 angular 团队推荐的语言，我可以根据个人经验说，在中型到大型项目中使用 es5 会随着时间的推移很难维护，因为它缺乏键入、类和继承等关键特性。
Can Angular 2 be used with plain JavaScript ?Yes, and you have some good examples above. Consider it carefully, go and review a comparisons like this one: https://johnpapa.net/es5-es2015-typescript/
Angular 2 可以与纯 JavaScript 一起使用吗？是的，你上面有一些很好的例子。仔细考虑，去回顾一下这样的比较：https: //johnpapa.net/es5-es2015-typescript/
