I always felt the need for a proper JavaScript (or client-side) framework. While searching, I came across various solutions like jQuery, AngularJS 1.x, Apache Cordova and PhoneGap. All of them had few things in common: they do not have built-in types and they do not support compile-time check. With the developing fame of AngularJS 1.x, I investigated it with desire that it may offer something better. Honestly speaking: I did not appreciate Angular JS (1.0) much because of its steep learning curve. To me, it involved more of a JavaScript or jQuery-like syntaxes. Inability to perform compile-time checks, no strong type cast features, no object-oriented programming style, as well as time-consuming learning… these were the reasons for me not to invest my energy in learning AngularJS (1.x).
Here is an AngularJS 1.x example to illustrate:
var myApp = angular
.module("myModule", [])
.controller("productController", function($scope) {
var prods = { name: "Prod1", quantity: 1 };
$scope.products = prods;
});
My simple observations from the above code is:
- There are attributes/properties declred as var (a typical JavaScript style). No way to distinguish between and String, Number or Boolean. Everything is just ‘var’- The above code is hard to read, there are functions-inside-functions; thuse giving an impression of a boiler-plate code
- There is no concept of object oriented programming here
When it comes to OOP, AngularJS 1.x is somehow strange (same as JavaScript) in comparison with other object oriented languages (like Java or C#). Looking at some of the sample codes/projects/tutorials in Angular1.x, I felt like “Hmmm …. this does not seem the right way to define a class”. One basic example is here: http://zbic.in/2015/08/01/OOP-in-AngularJS-within-minutes-1-Defining-a-class.html. With Typescript support in Angular2, we can define class in a more OOP way.
Now another example from jQuery
[Source: https://www.tutorialspoint.com/jquery/jquery-overview.htm]
This kind of code is really fragile and hard to maintain: one single quote in the wrong place and we will still have a valid JavaScript string that will look completely broken ONLY when rendered by the browser. This is the type of code that we don’t want to have to write ourselves: it’s really brittle.
A proper explanation is here: http://blog.angular-university.io/why-angular-angular-vs-jquery-a-beginner-friendly-explanation-on-the-advantages-of-angular-and-mvc/
My venture about Angular2.x
The best thing about Angular2.x (and above) is that it provides more choice for languages. I can use any of the language from ES5, ES6, TypeScript etc. For me, I choose TypeScript.
Angular 2’s TypeScript offers:
- Static typing
- Compile time error checking (e.g. type checking)
- Object-oriented programming
- Classes (with inheritence, extension, constructors)
- Lamdba/Fat Arrow functions (this is nice! I find it quite interesting as it has quite similarities with JDK 8 Lambda expressions)
Good things about compile time type checking are that,
- It helps me to write code in a bugfree way because it can prevent bugs at compile time and I don’t need to wait until my code is finished and it fails during runtime
- It improves readability of the code by clarifying intentions. (A String means text, a Number means numeric; unlike Angular1.x where a var can be either text or number).
What are the built-in types in Angular2.x?
The build-in types in Angular2.x that I mostly use are:
- String (e.g. “Hello World”, “John”)
- Number (e.g. 1, 5.00)
- Boolean (e.g. true, false)
- Array (e.g. name: String[])
- Enums (enum Role {Superuser, Administrator, Guest})
- Void (no return type is expected)
OOP features with Typescript and Angular2.x
Coming from a Object-Oriented background with Java Skills, I find the following code (after this section) is just elegant. Because,
- The code (below) is neatly isolated (rather than old-style JavaScript/JQuery way); subsequently making it more justifiable and readable.
- Class is defined and annotated with a component (a component object is imported above). The Class has properties, methods, and constructors.
- From the Array, it is clear to to understand that ‘prods’ is an array of type Product; and not just some arbitrary ‘var’ type
- Another important aspect of object oriented programming is inheritance. From the code (below), we can see that a class receives behavior from its parent class. Then we can override, modify those behaviors in the new child class.
Let’s see the code.
The same code (which was written above in Angular1.x), when re-written in Angular2, becomes like this:
import { Component } from '@angular/core';
@Component({
selector: 'prodsdata',
template: '<h3>{{prods.name}}</h3>'
})
export class ProductComponent {
prods : Product[];
constructor() {
this.prods = [new Product('Prod1', 1)];
}
}
Last but not the least:
One of the advantage of Angular is the Dependency Injection feature (with TypeScript style). With the use of @Injector, the hard-coded ‘new‘ operator is replaced within classes. With DI, the client object does not need to be aware of how instances are created; DI feature let’s us configure how objects are created and supplied to the client component.
Let’s see some codes (again 🙂 )
With two simple steps, DI can be achieved. First a class is decorated or annotated with @Injectable annotation
@Injectable() export class UserService { getUsers(): User[]; }
Next, the class is registered with providers in the @NgModule. In this way, the class will be available for injection anywhere in the application. We can also configure this class in providers of @Component but in this case it will be available to that component only, and not to any other components in the project.
@NgModule({ providers: [UserService], ... //Other stuff like declarations, imports, bootstrap etc }) export class AppModule { .... }
This class is now ready to be injected by its dependent classes. E.G.
@Component({ .... }) export class UserManageComponent { constructor(private userService: UserService) { } }
To conclude
There are quite a number of reasons to love Anguar2.x (and NOT Angular 1.x… spaghetti !). In short: Object-Oriented programming style (with DI feature), compile time error checking, consistent coding patterns, mobile support with NativeScript, rich documentation and community support are all I can think of.
M Chisty - Java Blog 