By: Anton N
 
Angularjs version 2 is now beta, and this is very good moment to try it. The first important thing I’ve noted: AngularJS 2 is built on Typescript. Well, this solves lots of the javascript problems, such as dynamic typization or lack of modularity, but on the other hand Javascript has much bigger developers community.As for me, I found using Typescript to be a good idea – after all, the newest version of ecmascript introduces features, which have existed in Typescript for a long time. Anyway, AngularJS 2 yet allows writing on pure ecmascript5, ecmascript6 and even Dart.

 
Another interesting thing is, that framework is now completely component based. AngularJS appliation is nothing more, than a tree of components: simple components compose more complex ones, which, in their turn, compose bigger components etc.
Now let’s look, how the simplest component looks like:

Annotation @Component at the top is called “Component decorator”, this is the part, where our component is configured. There are two options there, which are quite straightforward, especially for those, who is familiar with former version AngularJS.
Selector key defines, how our component will be represented in HTML layout. In our case it would be:

“Template” option defines the HTML code of the component. Notice, that HTML tags are surrounded with backticks, which allow writing multi line strings – a handy thing. In case, when template is too big, and it makes sense moving it to the separate file, “template” key, can be replaced with “templateUrl”, which would point at html file.

Similarly to the previous version of AngularJS, {{…}} syntax means data binding. It binds class variable with the value within the brackets, and every variable change will be represented on UI.

Now let’s imagine, that we have defined another component, which would be the part of our AppComponent (remember, that Angular components are the trees of other components):

In order to add it to the parent, we define “directives” config option:

When we need to pass data from parent to inner component, we use square brackets:

Inner component, in it’s turn, receives the passed data through inputs option, which is mapped on class variables:

Now if try running the app, we will have the following:

The next step would be adding some user interraction. Let’s make “Hello, Inner Component” text clickable. Adding click event handler is as simple as:

Looks simple, but what if we need to handle the event not in inner component, but in parent? First of all, we will need to subscribe parent component on events from child. The idea is similar to those, we used for subscribing on click event. The only difference, is custom “onMessageFromInner” event:

Now we need to allow inner component emitting this event. The first step will be adding, “output” option to the component config, where we declare emitted events.

Then we need to create emitter, for broadcasting events. Let’s rewrite a little, our on click handler:

EventEmitter is an observable object, which sends messages to it’s subscribers. Yes, reactive programming, and Observables, have become the essential part of the AngularJS. Learning RxJS tends to be little challenging, but It’s worth it. Now let’s try running the application, and clicking on the inner message:

Note, that we handle message in parent component.

Here is how AngularJS 2 application looks like. It is completely reworked framework, which has very few common things with it’s older version.

What is evident, is that new AngularJS2 oriented on the “tomorrows” technologies, most of which are not yet fully supported by browsers. That is why it is not surprising, that there are dependencies, such as system js, es6 shim or rxjs, which should be added to the project, prior to loading Angular JS framework itself.