Можно ли использовать ES5 JavaScript с Angular 2 вместо TypeScript?

Ответ 1

Да, вы можете.

Go прочитайте это guide. Нажатие на вкладке ES5 в примерах кода покажет вам обычный JavaScript-код ES5, как это указано в TypeScript.

Предварительный просмотр API по очевидным причинам является неполным. Таким образом, вы еще не можете найти перечисленные там методы ES5, и некоторые из них могут измениться до выпуска.

Текущий пример основного компонента Angular 2.0 в ES5.

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

Ответ 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>

Ответ 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);
    });

})();

Вот простая демонстрация todo list с помощью Javascript es5.

Ответ 4

Ниже приведен еще один пример в Plain Javascript на основе Angular2 "Tour of Heroes". Это копия DashboardComponent, которую вы можете найти в учебнике Angular2 (вы можете найти полный учебник Angular2 в Plain Javascript здесь 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 }]); }
});

Ответ 5

TypeScript будет просто надмножеством ES6. ES6 - это надмножество ES5. Это означает, что ES5 действительно TypeScript и ES6 в конце концов. Несмотря на некоторые особенности, на данный момент многое из того, что мы получаем из этих языков, это синтаксический сахар.

Вот статья, в которой показано как написать код Angular 2 в ES5.