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

Question

Is it needed to learn TypeScript for Angular 2?

Can Angular 2 be used with plain 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.

Answer 1

Yes, you can.

Go read this guide. Pressing the ES5 tab on the code examples will show you regular ES5 JavaScript, as apposed to TypeScript.

The API preview is, for obvious reasons, incomplete though. So you may not find the ES5 methods listed there yet, and some of it may change before release.

Current example of Angular 2.0 main component in 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);
});

Answer 2

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.

Here's an article that shows you how to write Angular 2 code in ES5.

Answer 3

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

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/

Answer 4

Yes.

Here are 2 simple components, written in different ways that Angular 2 supports when writing in 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

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.

Answer 5

Angular 5 dropped support for plain ES5.

See the following commit and comment on GitHub: https://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c42c9cd1850c4d

Answer 6

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

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

A simple way to write plain javascript es5 components:

(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 demo using Javascript es5.