是否可以使用 ES5 JavaScript 和 Angular 2 而不是 TypeScript？

Question

Angular2需要学习TypeScript吗？

Angular 2 可以与普通 JavaScript 一起使用吗？

编辑：我看到像 ES6、ES7、Dart 这样的语言编译成 JavaScript 来执行，但我还没有看到任何直接使用 ES5 JavaScript 的参考。

Answer 1

是的，你可以。

去读这个 guide。按代码示例上的 ES5 选项卡将显示与 TypeScript 相对的常规 ES5 JavaScript。

API preview 显然不完整。所以你可能还没有找到那里列出的 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);
});

Answer 2

TypeScript 将只是 ES6 的超集。 ES6 是 ES5 的超集。这意味着，ES5 毕竟是有效的 TypeScript 和 ES6。尽管有一些特定的功能，但目前我们从这些语言中获得的很多东西都是语法糖。

这里有一篇文章向您展示 how to write Angular 2 code in ES5。

Answer 3

是的。

这里有 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>

我在这里写了代码的详细解释：

Writing An Angular2 Component in Today’s JavaScript (ES5) – Beta 0 Edition

正如 link 所说，这适用于 Angular 2 Beta 0，它是几个小时前在撰写此答案时发布的。

Answer 4

编写纯 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);
    });

})();

这是一个简单的 todo list demo 使用 Javascript es5.

Answer 5

下面是另一个基于 Angular2 "Tour of Heroes" 的 Plain Javascript 示例。它是您可以在 Angular2 教程中找到的 DashboardComponent 的副本（您可以在 Plain Javascript 此处 http://programming.sereale.fr 中找到完整的 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 }]); }
});

Answer 6

Angular 5 放弃了对普通 ES5 的支持。

在 GitHub 上查看以下提交和评论： https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d

Answer 7

@jordiburgos Angular2需要学习TypeScript吗？ 这是 angular 团队推荐的语言，根据个人经验，我可以说，随着时间的推移，在大中型项目中使用 es5 会非常难以维护，因为它缺乏关键功能，例如输入，类和继承。

Angular 2 可以与普通 JavaScript 一起使用吗？ 是的，你上面有一些很好的例子。仔细考虑一下，去回顾一下这样的比较： https://johnpapa.net/es5-es2015-typescript/

是否可以使用 ES5 JavaScript 和 Angular 2 而不是 TypeScript？

Is it possible to use ES5 JavaScript with Angular 2 instead of TypeScript?

javascript

ecmascript-5

angular