Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 with es5

Angular 4 supports below syntax

var HelloComponent = ng.core
 Component({
    selector: 'hello-cmp',
    template: 'Hello World!',
    viewProviders: [Service]
  .Class({
   constructor: [Service, function (service) { 
   },`
  });

In Angular 5 , Class is missing anyone can provide Angular 5 with ES5 syntax currently i am not able to switch ES6 so please avoid that suggestion. if switching to ES6 is the only way then i will stick to angular 4 as of now

like image 580
Sqluser Avatar asked Dec 09 '17 17:12

Sqluser


People also ask

Can we use ES5 to write an Angular application?

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.

What is ES5 in Angular?

es5 is the 5th Edition ; es6 / es2015 is the 6th Edition of ECMAScript ; es7 / es2016 is the 7th Edition of ECMAScript ; So I am confused as to why I see es5 and es2015 as part of the bundles.

What is ES5 and ES6 in Angular?

ES5 is an abbreviation of ECMAScript 5 and also known as ECMAScript 2009. The sixth edition of the ECMAScript standard is ES6 or ECMAScript 6. It is also known as ECMAScript 2015. ES6 is a major enhancement in the JavaScript language that allows us to write programs for complex applications.

Is ES5 and ES2015 same?

ES2015 is a huge leap forward from ES5. It adds a tremendous amount of functionality to JavaScript. These features address some of the issues that made ES5 programming challenging. They are optional, as we can still use valid ES5 (including functions) in ES2015.


Video Answer


1 Answers

You need to use static properties annotations and parameters on your component class function something like this:

function Service() {}

function AppComponent(service) {
  console.log(service);
}

AppComponent.prototype.ngOnInit = function() {
  console.log('test ngOnInit');
};

AppComponent.annotations = [
  new Component({
    selector: 'my-app',
    template: '<h1>Example of Angular  5.0.5 in ES5</h1>',
    viewProviders: [Service]
  })
];

AppComponent.parameters = [ Service ];

Plunker Example

like image 148
yurzui Avatar answered Sep 30 '22 18:09

yurzui