In this article, we are going to write Angular 2 code in ES5 with the current latest version. As a recap, we know that Angular 2 is written in the TypeScript language, which gives the developers an advantage of various strong features of this language such as types, metadata annotations through decorators, etc. It is true that the developers who are new to TypeScript may find themselves a bit unclear and unskilled with the start-up examples of Angular 2 which are written in the TypeScript language along with the constructs such as classes in ECMAScript 6. To make it easier and more understandable, experienced developers figured out a way to write Angular 2 code in ES5, instead of TypeScript or ES6.
No Module system in ES5
The first difference to outline in ES6 against ES5 is that ES5 has no module system. Therefore in ES5, we should procure a JavaScript file from somewhere, which has all the Angular 2 code that could be embedded to our website module. Thus, there is no use to trans-compile, concatenate, and decide on a module system but the code is ready-to-operate into the website.
Embedding of npmcdn
In order to get started with ES5 and Angular 2, we need to embed the Angular 2 ES5 bundles known as npmcdn as shown below.
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/[email protected]?main=browser"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/bundles/Rx.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
Here @2.0.0-rc.5 is the version number. Therefore, in order to catch up with the latest version this part might change depending on the latest version available in the market.
Accessing annotations and/or decorators
In ES2015, we could access annotations as well as decorators by importing them from the framework. Otherwise, there is no direct way to import them. Therefore, the bundled version exposes an ng.core object which is on the current global scope or reuses an existing object that has all annotations added to it. Annotations are classes which turn out to be functions known as constructor functions which add metadata to our components. This infers that all we have to do is to call these annotation constructors manually and assign them to our component’s annotations property. We will demonstrate it in the following example.
Building an Angular 2 app in ES5
File app/main.js
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(
app.AppModule);
});
})(window.app || (window.app = {}));
Main.js file is responsible for bootstrapping angular 2 app in ES5. Here, we are making sure that all the required DOM is loaded before we can bootstrap our module. Therefore, we are adding an event listener for the DOMContentLoaded event. Once the event is triggered, it will call platformBrowserDynamic ().bootstrapModule (AppModule) to bootstrap our entire Angular 2 ES5 app.
File app/app-module.js
(function (app) {
app.AppModule = function AppModule() {}
app.AppModule.annotations = [
new ng.core.NgModule({
imports: [ng.platformBrowser.BrowserModule],
declarations: [app.AppComponent],
bootstrap: [app.AppComponent]
})
]
})(window.app || (window.app = {}));
Here, we have created an NgModule as shown above. In ES5, we have used the ng.core.NgModule in order to create the needed metadata on a constructor function. Here, we have created an AppModule function and added NgModule annotations into it. Just like ES6, where we use the TypeScript language to import BrowserModule, here in ES5, we have used ng.platformBrowser package, to import the BrowserModule in order to bootstrap our module in the browser environment. Next, in the declaration section we are declaring all directives and components (here app.AppComponent). Lastly, in the bootstrap section we are telling Angular about the component (app.AppComponent) to bootstrap or start when the module is bootstrapped.
File app/app-component.js
(function(app) {
app.AppComponent = function() {
};
app.AppComponent.annotations = [ new ng.core.Component({
selector : 'my-angular2-es5-app',
templateUrl : 'resource/app-component.html',
directives : [ app.HelloWorldComponent ]
}) ];
})(window.app || (window.app = {}));
Here, instead of using the decorator (i.e. @component) as in ES6, we are using ng.core.Component to create a component in ES5. Firstly, we created an AppComponent function and added Component annotation as shown above. Next, we declared selector as ‘my-angular2-es5-app’, templateUrl as ‘resource/app-component.html’ and directives as ‘[app.HelloWorldComponent]’ in the similar way we used TypeScript or ES6 in Angular 2.
File resource/app-component.html
<h2>Welcome to our first Angular 2 code in ES5</h2> <p>In this demonstration, we are using ES5 instead of TypeScript and ES6 to code and run the Angular 2 code.</p> <hr> <br> <hello-angular2-es5></hello-angular2-es5> <hr>
The above file contains the HTML code as declared in templateUrl ‘resource/app-component.html’. Here, we have written the HTML code along with the selector ‘hello-angular2-es5’ which is defined in ‘HelloWorldComponent’ as shown below.
File app/hello-angular2-es5-component.js
(function(app) {
app.HelloWorldComponent = function() {
};
app.HelloWorldComponent.annotations = [ new ng.core.Component({
selector : 'hello-angular2-es5',
template : 'Welcome to the world of Angular 2 in ES5!'
}) ];
})(window.app || (window.app = {}));
Here, instead of using decorator (i.e. @component) as in ES6, we are using ng.core.Component to create a ‘HelloWorldComponent’ component in ES5. Firstly, we have created a HelloWorldComponent function and added Component annotation as shown above. Next, we have declared selector as ‘’hello-angular2-es5′, and template as ‘Welcome to the world of Angular 2 in ES5!’ in the similar way to using TypeScript or ES6 in Angular 2.
File assets/styles.css
h2 {
color: #369;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
p {
color: #969;
font-family: Georgia, Helvetica, sans-serif;
font-size: 250%;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
Explanation of Code: It is the stylesheet used to style the text on the web page of the app.
File index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 code in ES5</title>
<!-- 1. Load libraries -->
<link rel="stylesheet" href="assets/styles.css">
<!-- IE required polyfill -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/[email protected]?main=browser"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/bundles/Rx.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/hello-angular2-es5.component.js'></script>
<script src='app/app-component.js'></script>
<script src="app/app-module.js"></script>
<script src='app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-angular2-es5-app>Loading...</my-angular2-es5-app>
</body>
</html>
Explanation of Code:
It is the ‘index.html’ file that has ‘my-angular2-es5-app’ tag in its body section i.e. selector defined in the ‘app-component.js’ to load and display the complete application. Here, we are including all the paths for the scripts which are required for the Angular 2 in ES5 (Embedding of npmcdn) build as discussed before.
Output
When we run the above angular 2 ES5 app by executing the command ‘npm start’ on command line that has pointer to the application’s root directory ‘angular2-es5’, then we will observe the following output.
Source Code on how to Write Angular 2 Code by using ES5
Conclusion: –
In this article, we discussed how we can alternatively build an app in Angular 2 by using ES5 instead of TypeScript language or ES6, along with an example. Such an approach could be useful for the web developers who are still comfortable in using ES5 and want to avoid using TypeScript language or ES6 to build an app in Angular2.
