是否可以将ES5 JavaScript与Angular 2而不是TypeScript一起使用？

Question

是否需要为Angular 2学习TypeScript？

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

编辑:我已经看到用作ES6,ES7,Dart的语言编译为JavaScript要执行,但我还没有看到任何直接使用ES5 JavaScript的参考.

Answer 1

是的你可以.

请阅读本指南.按下ES5代码示例上的选项卡将显示常规的ES5 JavaScript,与TypeScript相似.

该API预览是,出于显而易见的原因,虽然不完整.所以你可能还没有找到那里列出的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

是.

以下是两个简单的组件,使用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>

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

在今天的JavaScript(ES5) - Beta 0版中编写Angular2组件

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