Question

是否需要为Angular 2学习TypeScript？

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

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

Answer 1

是的，你可以。

请阅读此guide。按代码示例上的ES5选项卡将显示常规的ES5 JavaScript，与TypeScript相似。

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

是

以下是两个简单的组件，用Angular 2在JavaScript中编写时支持的不同方式编写（EcmaScript 5）：

＆＃13;

(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);
  });

}());

＆＃13;

<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>

＆＃13;

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

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

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

Answer 3

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

})();

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

Answer 4

以下是基于Angular2“英雄之旅”的普通Javascript中的另一个示例。它是您可以在Angular2教程中找到的DashboardComponent的副本（您可以在此处找到简单Javascript中的完整Angular2教程http://programming.sereale.fr）：

//= 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 5

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

请参阅以下对GitHub的提交和评论： https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d

Answer 6

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

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

Answer 7

@jordiburgos 是否需要为Angular 2学习TypeScript？ 它是角度团队推荐的语言，我可以从个人经验中说，在大中型项目中使用es5可能很难维护，因为它缺乏键入，类和继承等关键功能。 / p>

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

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

7 个答案: