ngTransform from AngularJS to Angular
When I tell someone that I do Angular, one of the first questions I usually get is “Which Angular? 1, 2, 4 or 6?” Being one of the most popular JavaScript frameworks — Angular’s progression didn’t go in a typical way and that’s the reason why many people confuse whether Angular has different versions of the same framework or each of the versions is a different framework. Actually, in the progression of Angular there was one single ngTransform of a framework while the others were just upgraded versions of the same framework. So to be clear, we have a framework that we call Angular 1 or AngularJS and its last and latest version is 1.7 and in fact it will never reach Angular 2. And on the other hand we have Angular which is a completely new framework with starting version of 2.0 and which continuously gets its updated versions like 4.0, 5.0, 6.0 and by the time you are reading this article most probably 7.0 and maybe further (Fig. 1).
Figure 1. Version history of AngularJS and Angular frameworks
So we have two different frameworks and you might be interested how it feels for an AngularJS developer switching to the new Angular. At first sight, Angular code feels strange and it looks like completely different compared to its descendant. But digging deeper you can find a lot in common which is just wrapped in another syntax and understanding those similarities and differences will help to make that ngTransform easier and enjoy new and powerful Angular even more than AngularJS.
One of the main concepts for both frameworks which is responsible for definition of the whole or part of the application is Angular modules. In AngularJS to create a module we use angular.module() method where we name it and later use it in the HTML as a root module. In the same method we would also set all external dependencies. In the new Angular those modules are called ngModules, they are imported from core Angular and they are being used as decorator on a class. Inside of that decorator we import all the necessary external dependencies. Unlike in AngularJS, in the new Angular you define your root module in the same file as an exported class (Fig. 2). Besides importing the list of other Modules we use declaration property to list the components (we’ll tackle it in more detail below) that are going to be used in our module and also we define a bootstrap property to tell Angular a root component which is being inserted in main HTML and which starts the application module.
Figure 2. Module definition in AngularJS vs Angular
In AngularJS we had Controllers responsible to control the data flow in our application. We define them using the angular.controller() method and connect its driver function which actually will dynamically control the appropriate HTML code. In the new Angular, instead of Controllers there are Components which are actually exported classes (as almost everything in Angular) with their own @Component decorator where we define selector — an identifier of component in HTML code, and template — an html template code of the Component that will be inserted within selector tag (Fig. 3). Angular Components can be used everywhere in the application where our component is declared within the appropriate module.
Figure 3. Controllers vs Components
In both AngularJS and Angular there are built-in directives in an HTML code and generally they look pretty much similar to each other with some minor differences. In AngularJS all the built in directives had the format of ‘ng-directive’ while in the new Angular each type of a directive has its own writing format. For example to indicate any directive that would lead to structural change in HTML code has the format of ‘*ngDirective’. We will look into different types of built-in directives of Angular in the next paragraph when we dig deeper into data bindings.
Another important specification of Angular is data binding. In that way DOM is being in communication with the controller/component. There are 4 types of data binding (Fig. 4).
Figure 4. Data Binding types
First one — Interpolation is when we insert any variable from a controller/component inside of {{double curly brackets}} and bind it to the DOM (Fig. 5).
Figure 5. Interpolation in AngularJS vs Angular
One way binding is similar to Interpolation is that its usage is way more powerful in the new Angular. With one-way binding we can bind any valid HTML property to a variable using [square brackets ](Fig. 6).
Figure 6. One way binding in AngularJS vs Angular
When we have a user interaction then there might be a need to get that interaction data from DOM and send it to our controller/component. To do that, we use event binding and in AngularJS we had built-in directives such as ng-click, ng-blur, ng-focus, ng-keyup, etc. What is cool in the new Angular is that instead of that built-in directives we use existing events on HTML elements and we just wrap them in (parentheses) and instead of mentioned directives we will have (click), (blur), (focus), (keyup), etc. (Fig. 7).
Figure 7. Event binding in AngularJS vs Angular
And the last and the most powerful data-binding option is two way binding where the data can be manipulated from both DOM and controller/component. We use ng-model directive in AngularJS. In the new Angular we’ve got a helper built-in directive [(ngModel)] (Fig. 8).
Figure 8. Two way binding in AngularJS vs Angular
As you see, we have a bit complicated format for the two way data binding directive but actually it has logic behind it. First we have [square brackets] like we had in one way property binding, so this way we get the value of property from the controller/component. On the other hand we can change the data from DOM like in case of event binding where we were using (parentheses). Therefore for two way data binding we’ve got these format of (parentheses) wrapped within [square brackets].
So summing up from previous paragraph, we can admit that Angular discarded many built-in directives previously being used in AngularJS as most of them were replaced by existing HTML properties and events accordingly are wrapped into [square brackets] and (parentheses) (Fig. 9).
Figure 9. AngularJS Built-in directives vs formatted HTML properties in Angular
The Next core concept of Angular is Services which represent reusable logic within the whole application. If in AngularJS we had a bunch of service types like Factories, Services by itself, Providers, Constants and Values, in the new Angular we have just classes (Fig. 10).
Figure 10. AngularJS Service types vs Classes in Angular
So defining a class and writing a logic in it we can make it represent any of the above mentioned service types from AngularJS. In AngularJS in the definition of module we need to define service() method(or the factory(), provider(), etc.) to create a service or whatsoever connecting it with the appropriate function. In Angular we just define a class and export it (just don’t forget to add Service as a suffix of class name by convention) (Fig. 11).
Figure 11. Service definition in AngularJS vs Angular
Also, to be able to use the service within the application we use @Injectable decorator above class expression.
And last but not least the key specification of Angular is the Dependency Injection. That’s how we inject services into different controllers/components of our application. But before injecting we had to somehow register them. In AngularJS we were registering service together with the definition using appropriate methods (Fig. 12).
Figure 12. Service registration in AngularJS vs Angular
In the new Angular we just use property providers inside of our @ngModule decorator where we actually register our services. Once the service is registered then we can inject it in the controller/component (Fig. 13).
Figure 13. Dependency Injection in AngularJS vs Angular
By the way, as I mentioned in the beginning, AngularJS already got its last update and will keep being supported until 2021, while Angular continues getting updates and becoming better and better from version to version including new tools and features making development on Angular easier, faster and more joyful. One of my personal favorite tools that had been introduced in v6.0 is Angular CLI — A command line interface for Angular which makes application setup and components generation available with simple command lines. Another favorite tool is Angular Material Starter Components — a library of material design components on which you can build your own detailed and project specific components.
Actually, applying Typescript and features from ES2015+ while using AngularJS can indeed make it less different from the new Angular. Moreover, since Components had been introduced in AngularJS v1.5 which are a special kind of AngularJS directives with much more simple configurations making them suitable to component based application. And if you used it in AngularJS you will most probably easier understand Components in the new Angular. So, the more you’re used to AngularJS later features and Typescript or ES2015+ features, the easier your ngTransform from AngularJS to Angular will be.
If you want to have more insights into new Angular Docs, Angular CLI and Angular Material check out these sources:
To bring you these infographics, I’ve checked out this course on Angular by John Papa.
About this author:
Khachatur Tovmasyan is a JavaScript Jedi with a heart for web technologies, yoga and meditation.
