blog2AngularJS 2 is a latest version of AngularJS framework and it is trending now. When AngularJS 1 was released, it made a major impact on front-end development. With AngularJS 2, the core team has built it from scratch even many of the ideas are same. The coding experience of AngularJS has changed and it enhances to the next level.

But, before moving to this exciting framework these 4 libraries which are officially accepted by AngularJS team are very important and understanding them is a must.

You can go to this link and check step 5 https://Angular.io/docs/ts/latest/quickstart.html where you can see all these node modules are included.

Now let’s start with Corejs:
1) Corejs (https://github.com/zloirock/core-js)

Corejs in simple words it just fills the gap between different versions of ECMA. Suppose you have written code in ECMA6 and you want to run it in browser where it does not support ECMA6 then core-js comes into picture.
Lets see one example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
<script>
Array.from(new Set([1, 2, 3, 2, 1]));
</script>

Run this script say in Internet explorer 8 without including core-js it throws an error saying that “set is undefined” because ECMA 6 is not supported in Internet explorer 8 then run it by including core-js.

2) Zonejs (https://github.com/Angular/zone.js/)

Zonejs which is actually introduced in ng-conf 2014 by Brain Ford watch this video for detail information https://www.youtube.com/watch?v=3IqtmUscE_U.

Zonejs as defined by Brain ford “A Zone is an execution context that persists across async tasks”.

In Simple Words Zone wraps all async tasks into one unit.

Also it helps in debugging, profiling etc.

Lets see one example:

<script>

function one() {

console.log("one");

}

function two() {

console.log("two");

}

function zone() {

one();

setTimeout(two, 2000); //Async call

}

//onHasTask is called whenever the function finishes the execution

var z = Zone.current.fork({

onHasTask: function (parent, current, target, hasTask) {

console.timeEnd(); //end the timer

}

});

console.time(); //start the timer

z.run(function () {

zone();

});

</script>

output:

one

default: 6.000ms

two

default: 2007.000ms

3) Systemjs (https://github.com/systemjs/systemjs)

It is Universal Dynamic Module loader i.e., it helps to load modules on demand. Let’s straight away go to example and understand. Now let’s create 2 different js files.

//This is message.js file

<script>

function logMessage() {

console.log("Hi");

}

</script>

//This is demo.js file

<script src=https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.39/system.js></script>

<script>

console.log("CronJ AngularJS Experts");

SystemJS.import(message.js).then(function() { //This import function loads the file on demand.

logMessage();

}

</script>

output:

CronJ AngularJS Experts

Hi


4) Reflectjs (https://github.com/rbuckton/ReflectDecorators):

Languages like C# (.NET), and Java support attributes or annotations that add metadata to types, along with a reflective API for reading metadata.

For example:

In c# you can make a method obsolete.

[Obsolete] //This attribute/decorator deprecates the method

public void oldmethod() {

}

As AngularJS 2 is decorator based reflect-metadata plays a very important role

If you want achieve in AngularJS 2.

For example:

//This is typescript code

export class employee {

@Reflect.metadata("obsolete","true");

oldMethod() {

}

}

What for you?

It is good to go through all the links given as it helps to understand how AngularJS 2 works. Take step to build simple applications your own and implement real features that you can build with AngularJS 2.

Looking for AngularJS Development Company, hire our dedicated developers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.