Running your first Angular 2.0 application

Angular is a binding framework that binds HTML UI to JavaScript objects. The first version of AngularJS has been around for the last 6 years. However, just a couple of months back, the next stable version of AngularJS, AngularJS 2.0 has been released (https://en.wikipedia.org/wiki/AngularJS). This article briefly introduces you to the way AngularJS 2.0 solutions are organized.

Why AngularJS 2.0?

AngularJS 2.0 is made up of a core group of components which assume the responsibilities to bind HTML UI with the JavaScript objects. The group of components then logically puts into the modules. And these modules get loaded during the runtime as per the requirement.

And that’s where the beauty lies in repainting the DOM in faster way in AngularJS 2.0. In AngularJS 1.x all components are loaded in one go whether they are required or not but in AngularJS 2.0 the modules and components are loaded only when necessary during the runtime and that brings down the memory footprint of the browser, thus making it faster and more efficient.

 How Angular2.x solutions are organised:

The link ‘https://angular.io/docs/ts/latest/quickstart.html’ will give you the complete process to create and run your first AngularJS 2.0 application. The approaches demonstrated there can be divided into 5 important steps as follows:

1. Create a Master page to load the views bound with data from JavaScript/Business object.
2. Include ‘startup’ section inside that Master page that relates to the section in systemjs.config.js file to download the required framework during runtime in an asynchronous way.
3. Refer to the Startup.js file in systemjs.config.js file to download the required modules you created or imported from @angular-core.
4. The modules in turn download the required components.
5. The modules will then load the JavaScript/Business Objects/Models and bind the UI and displayed inside the place holder of the master page defined by the decorator/selector.

Diagrammatically we can depict the entire process of binding in the following way:

Pre-requisites for developing AngularJS 2.0 Application

Three things are required to install in your machine to develop Angular Application:

1. Visual Studio IDE from https://www.visualstudio.com/
2. TypeScript for Visual Studio 2015 from https://www.microsoft.com/en-us/download/details.aspx?id=48593
3. js from https://nodejs.org/en/

Conclusion

The JavaScript Modules, Components, Objects all are loaded on-demand during the application runtime in an asynchronous way. The system.js plays a major role in this process. This development paradigm really brings down the footprint of the execution time and DOM traversing in the browser in real time.

We can tailor this runtime downloadable/inclusion of objects, components, modules and framework as required to make our application faster. In the next blog I will be discuss some of the other pre-requisites like shim.js, zone.js, Reflect Metadata, TypeScript, Node.js etc. in detail that are required to execute AngularJS 2.0 application.