Introducing Angular

Let's discuss the history of AngularJS before introducing you to Angular. It all started with improving the development process of client-side web. As part of the improvement, Microsoft introduced the XML HTTP request object to retrieve data from the server. As the advanced JavaScript libraries such as jQuery and Prototype were introduced, developers started using Ajax to asynchronously request data from the server. These libraries were extensively used to manipulate the DOM and bind data to a UI in the late 90s.

Ajax is the short form of asynchronous JavaScript and XML. Ajax can enable web applications to send data to or retrieve data from a server asynchronously without interfering with the display and behavior of the page. Ajax allows web applications to change content dynamically, without reloading the full page by decoupling the data interchange layer from the presentation layer.

In late 2010, two JavaScript MVC frameworks were introduced: backbone and knockout. Backbone provided a complete Model-View-Controller experience, whereas knockout mainly focused on binding using the MVVM pattern. With the release of these frameworks, people started believing in the power of client-side MVC frameworks.

The birth of AngularJS

A developer from Google felt that there was one major part missing in the client-side MVC frameworks that existed in the market, that is, testability. He felt that there was a better way to implement client-side MVC, and this made him start his journey to build Angular.

Google supported the Angular project, seeing its potential, and made it open source for the world to use it for free. Angular created a lot of awareness among all the MVC frameworks in the market as it was backed by Google and also due to its features, such as testability and directives. Today, the Angular team has grown from a single developer to a large number of developers, and it has become the first choice to add the power of client-side MVC to small, medium, or big web applications.

Why AngularJS?

Let's discuss why to use AngularJS and what is the benefit or value addition that our application can get by using AngularJS:

• AngularJS provides two-way binding: Many client-side MVC frameworks provide only one-way binding. This means that other MVC frameworks will update HTML with the model from the server, and when the user changes the model on the page, the frameworks will not update the model according to the changes made. A developer has to write code to update the model according to the user action. However, AngularJS facilitates two-way binding and has made the life of developers easier by updating the model as per the user's actions on it.
• AngularJS utilizes declarative views: This means that the functionalities will be communicated as declarative directions in HTML to render the models and interact with the DOM to change the page state based on changes in the model. This extensively reduces the code by about 50% to 75% for this purpose and makes the life of developers easier.
• AngularJS supports the directive concept: This is like writing a domain-specific language for the web application. Directives will extend the functionality of HTML and render them dynamically according to the changes in the application rather than just displaying the HTML page.
• AngularJS is highly testable: As said earlier, one of the main mottos of the development of Angular is to introduce a testable client-side MVC framework. AngularJS is highly testable, and in fact, the Angular team has introduced two frameworks: Karma and Protractor, to write end-to-end unit testing to ensure the stability of the code and to enable the refactoring of the code confidently.

Angular 2

AngularJS is a good framework. However, it is six years old, and there are a lot of things that have changed in these six years in the web world. To accommodate all these modern happenings in AngularJS, it would have to undergo many changes in the existing implementation, and this made the Angular team write AngularJS from scratch.

At the ngEurope conference held in October 2014, Angular 2 was announced as a massive update to Angular 1 for building complex web applications. The ngCommunity was a little upset as they invested a lot of time in learning and implementing Angular 1, and now they had to redo the process of learning and implementing Angular again. However, Google invested a lot in the migration and upgrade process from Angular 1 to 2 by introducing ngUpgrade and ngForward. Once the developers started learning and building products in Angular 2, they realized the power of cleaner, faster, and easier Angular 2.

Angular 2 was rewritten from scratch. It helped us write clean and testable code that can run on any device and platform. Angular 2 eliminated many concepts from Angular 1. Angular 2 follows the standardization of ECMAScript 2015. With the recent web standardization, the shadow DOM replaced transclusion and the ECMAScript 6 modules replaced Angular modules. Angular 2 is five times faster than Angular 1.x.

The benefits of Angular 2

The following are the features and benefits of Angular 2:

• It supports cross-platform application development, such as high performing apps like web apps, native apps using Ionic Framework, NativeScript, React Native, and creating desktop-installed apps by accessing native OS APIs using Angular methods.
• Angular 2 inherits all the benefits of Angular 1. It replaced controllers and directives with components.
• Angular 2 was written in TypeScript and also, it enabled developers to write Angular 2 applications using TypeScript.
• Angular 2 is significantly faster than Angular 1. The new component router only loads code required to render a view that is requested. The template syntax enables a developer to quickly create views with the powerful template syntax.
• Angular 2 enables us to use shadow Document Object Model (DOM). Shadow DOM encapsulates CSS, template, and the component. This enables decoupling from the DOM of the main document.
• It is the simpler cognitive model. A lot of directives were removed in Angular 2 and this means that Angular 2 has fewer pieces and fewer moving parts so that it is easier to build larger applications with Angular 2 than with Angular 1.

The development process in Angular 2

Angular 2 has two development processes, namely, the following:

• With a transpiler
• Without a transpiler

What is ECMAScript 6?

ES6 is the latest version of scripting language specification. It is a JavaScript language used on the world wide web for client-side scripting. ECMAScript 6 is a great update to JavaScript language and the process of implementation of these features in JavaScript engine is in progress.

What is a transpiler?

A transpiler basically converts any specific language to JavaScript. A good example of this is the Typescript transpiler, which converts Typescript code to JavaScript.

What is TypeScript?

TypeScript is an open source programming language developed by Microsoft. It is a superset of JavaScript, and it enables programmers to write object-oriented programs in JavaScript. TypeScript is also used to develop transpiler, which converts TypeScript to JavaScript. It is designed to develop larger applications. TypeScript was developed as per the proposal of ECMAScript standard. TypeScript has features such as classes, modules, and an arrow function syntax, as proposed in ECMAScript 6 standard.

The development process in JavaScript

Before discussing the development process with a transpiler, let's look at the development process specific to JavaScript to build a web app. We will write our code in ECMAScript 5 and Deploy it to the Server. ECMAScript 5 is the script that every browser understands today. When a Request comes from the Browser, the server will serve the script and the browser will run it in the client side. The following diagram shows the typical development process for JavaScript:

The development process in JavaScript

Development with a build-time transpiler

Instead of writing scripts in the current version of JavaScript, ECMAScript 5, we can also write scripts in ECMAScript 6+ using Typescript and Transpile them into ECMAScript 5. Then, Deploy the transpiled script to the Server, and the Browser Request will be served with the Transpiled script, which is ECMAScript 5, that is to be executed on the client side. The benefit of this is that we can use the new features of the latest version of JavaScript or ECMAScript.

The development process with a build-time transpiler

 

Development with a runtime transpiler

There is another development option called runtime transpiler. In this case, we start off by writing scripts in ECMAScript 6+ using Typescript or CoffeeScript and then Deploy the scripts to the Server. When a Request comes to the Server, it simply serves ECMAScript 6+ code without Transpiling to the Browser. Then, the browser Transpiles the scripts to ECMAScript 5 using a runtime transpiler to execute it in the client side. This type of option is not good for production applications as it puts extra load on the browser.

The development process with a runtime Transpiler

Transpiler options

In Angular 2, we have two options- to use a transpiler or to not use a transpiler. The following are a few types of transpilers that are available:

• Traceur: It is the most popular transpiler by Google, and it can be used both in build-time mode and runtime mode.
• Babel: This transpiler works on the most latest version of ECMAScript.
• Typescript: This is one of the most popular and preferred transpiler for Angular. The Angular team collaborated with the Typescript team and they have worked together to build Angular 2.

What happened to Angular 3?

After the release of Angular 2, the team decided to go with semantic versioning. Semantic versioning follows three number versioning, representing major, minor, and patch. Patch version is the last number in the version that will be incremented for every patch release, usually bug fixes. Minor version is the middle number in the version that deals with the release of new features or enhancements. Finally, the major version is the first number in the version that is incremented for the release with breaking changes.

Angular team switched to use TypeScript 2.2 from TypeScript 1.8 that is used in Angular 2. This introduces some breaking change that obviously leads to increment the major version number. Also, the current version of router module is 3.3.0, which is not in alignment with the other modules of Angular that are still in 2.3.0. So, in order to keep all the module versions in sync and follow semantic versioning, the Angular team decided to go with Angular instead of Angular 3 for their next major release.

What's new in Angular ?

The following are the new features in Angular:

• TyepScript 2.1+ is the required scripting language for Angular.
• Ahead of Time compilation mode enables Angular to compile the templates and generates JavaScript code during the build process. This helps us identify the errors in templates during the build-time rather than at runtime.
• Angular animation has its own package, and it means that you don't need to ship animation packages to the projects that don't need animation.
• Template tag is now deprecated as it leads to confusion with the template HTML tag that is used in web components. So, ng-template is introduced for templates in Angular.

Apart from these, other new features have been introduced in code level.

Why Angular for .NET developers?

The complexity of writing client-side code using JavaScript in .NET web applications kept increasing in scenarios such as data-binding, server calls, and validations. .NET developers faced difficulties in writing client-side validations using JavaScript. So, they discovered and started using jQuery plugins for validations and mostly, just to change the views according to user actions. In the later stages, .NET developers were looked after by JavaScript libraries that ensure the structure of the code and provide good features to simplify the client-side code. Then, they ended up using a few client-side MVC frameworks in the market. However, they only used the MVC frameworks to communicate with the server and to update views.

Later, a trend of SPA (Single Page Applications) came into picture in the web development scenario. These kinds of applications will be served with an initial page, possibly in a layout view or master view. Then, the other views will be loaded onto the master view as and when requested. This scenario will be achieved by implementing client-side routing so that the client will request a small part of the view rather than the entire view from the server. Achieving these steps created more complexities in client-side development.

AngularJS came as a life saver for .NET developers by enabling them to reduce their efforts in performing client-side development of handling applications, such as SPA. Data binding is the coolest feature of Angular that enables the developer to concentrate on other parts of the application instead of writing huge code to handle data binding, traversing, manipulating, and listening to the DOM. The templates in Angular are simple plain HTML strings that will be parsed into DOM by the browser; the Angular compiler traverses the DOM to data bind and render instructions. Angular enables us to create custom HTML tags and extend the behavior of the existing elements of DOM. With the built-in support to dependency injection, Angular resolves dependent parameters by providing their instances implicitly.