Tips & tricks

As you know that AngularJS (v1.x) is the precursor of Angular(v2.x and above) and it was used widely 3,4 years ago. But why Google decided to change it to Angular with totally different code syntax. As a result, there is no easy way to migrate from AngularJS to Angular? Let’s figure out o!ne of the biggest change in code syntax

Above of all, the obvious change in the code syntax is TypeScript

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

Firstly, let’s compare AngularJS and Angular syntax via the simple directive

AngularJS

angular.module('simpleModule', []).controller('Controller', ['$scope', 'myService'function($scope, myService) {
        $scope.customer = {
            name: 'Naomi',
            address: '1600 Amphitheatre'
        };
        $scope.doSomething = function() {
            myService.doSomething();
        }
    }])
    .directive('myCustomer', function() {
        return {
            template: 'Name: {{customer.name}} Address: {{customer.address}}'
        };
    });

Angular

import {Component} from "@angular/core";

@Component({
    selector: 'my-app',
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
})
export class MyCustomer {
    constructor(private myService: MyService) {}
    customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };
    doSomething() {
        myService.doSomething();
    }
}

Can you spot the difference easily?

That main difference is how we organized the code.

Historical, with AngularJS we need to follow the structure of AngularJS. For that reason, we need to write a lot of boilerplate code to make our code compatible with AngularJS. Have you ever wonder what is the role of “angular.module”, “$scope”, “directive”, “template” in our business value? The answer is nothing at all. We came up with the question is what happens with we remove this useless stuff and reuse remaining code? As a result simply nothing works and nothing can reusable

In contrast with Angular, our structure is independent with Angular, that only depends on standard javascript that means the code is much more usable, readable compare to AngularJS when we switch to other frameworks. But what is the role of “@Component” in the above example? “@Component” is one of the features of Angular but why I said that our Angular code is independent with Angular. The answer is “@Component” doesn’t belong to our actual code thank to the cool feature of Typescript is Decorator

TypeScript’s decorator gives us the ability to add more additional features to support annotating or modifying classes and class members. You can find out more information in this link: https://www.typescriptlang.org/docs/handbook/decorators.html

So that with the help of TypeScript’s decorator, we add more additional data in the standard way to make our code works with Angular. By removing these additional data, we can easily reused most of the code without changing anything.

Conslusion

Angular with Typescript built-in support has help developers to write less code but gain more thing. For that reason, it’s worth for changing the code syntax even there is no easy way to migrate from AngularJS to Angular

Leave a Reply