Angular

Angular is a One Page App Framework

What is Angular?

Angular is a development platform (framework) built on TypeScript.

• It is a component-based framework for building scalable web applications

• It includes a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.

The main elements of Angular are:

• NgModules

• Components

• Services

• Templates

• Directives

• Data Binding

• Decorators

• Resolvers

NgModules

Every Angular app has a root module called AppModule.

AppModule bootstraps the application.

NgModules can import functionality from other NgModules.

NgModules can also allow their own functionality to be exported and used by other NgModules.

A common used NgModule that is imported into the app is the Router NgModule.

Packaging functionality into NgModules provides reusability. It also allows for lazy loading. For example if you login as an admin, you only then need to download the admin NgModule that contains all code needed for admin functionality. This reduces the amount of code needed to be loaded at startup.

Routing NgModule

The routing module is normally installed to manage routes.

It maps URL like paths to views. The router can lazy load a module if the view is mapped to components that belong to as yet unloaded module.

The router module updates browser history so you can use the browser back and forward arrows with a one page app.

Components

Each Angular application has a root component which connects the component hierarchy with the DOM.

A Component has:

• a class that contains application data and logic

• HTML template that defines a view to be displayed on the DOM

• a @Component() decorator that provides metadata such as which template is mapped to the component.

Template

A Template belongs to a Component and combines HTML with markup that can modify HTML elements.

Template Directives

A Template can contain Template Directives. Template Directives allow for constructs like for loops and if statements:

<li *ngFor="let hero of heroes">

<button type="button" (click)="selectHero(hero)">

{{hero.name}}

</button>

</li>

Binding Markup

Binding markup connects your application data to the DOM. There are 2 kinds of data binding:

Event Binding - user input updates your application data.

Property Binding - application data is read and interpolated into the HTML

Two way data binding is using both Event and Property Binding.

Behind the scene Angular creates listeners to implement the event binding. The listeners listen to input fields and update the application data when they receive an event.

In the above diagram the:

{{value}}

is placed in the html template. Then in the component you have a property called value which is assigned a value. That value gets rendered in the template.

Consider:

<input [placeholder]="Start capture time" type="date" matInput [(ngModel)]="startCaptureTime">

The attribute is populated with the text: "Start capture time"

Consider

[(ngModel)]="startCaptureTime"

In the component there is a property called startCaptureTime. The input tag in the template is initial populated with the value of the startCaptureTime field in the component.

However as there are two brackets "[(" we know this is two way binding. Which means when you update the value of the text box it will also update the property "startCaptureTime" in the component.

Under the hood it did this by creating a listener which listens to you typing in the input box.

Now consider:

<button class="btn btn-sm btn-danger" (click)="editEmployer(employer.employerId)">Edit</button>

the (click) is an event listener which calls a function called editEmployer(..) defined in the component.

Pipes

Pipes can be used to transform data for display. They are added in the templates. They can do stuff like:

• display dates or currencies for the current local

• convert observables into data

You can also create your own pipes.

Services

Services are called by components to do stuff like make AJAX calls to the server.

A service is decorated with the @Injectable decorator. Dependency Injection then injects the services as a singleton where ever you use it.

A singleton means there is only one instance of this service. if you add fields to the service they can be used to keep state.

Decorators

A decorator uses the @ symbol.

Component Decorator

@Component({

selector: 'app-hero-list',

templateUrl: './hero-list.component.html',

providers: [ HeroService ]

})

export class HeroListComponent implements OnInit {

/* . . . */

}

templateUrl specifies the template to be used for rendering the view.

Inside the template you can add tags as specified by the selector. In this example you will see tags like:

<app-hero-list></app-hero-list>

So when the framework comes across the above tag in the template it will execute the component.

The providers attribute of the decorator specifies which services this component needs.

Resolvers

You can configure resolvers that pre-fetch data before showing the template. If you do not use resolvers you will see the web page change as the ajax calls come back.

Angular versus ReactJs

The advantages of Angular over ReactJs are:

• the libraries are pre configured so you do not need to be an expert to set the project up

• the libraries have been pre configured using best practise and it provides structure to the project. This allows lots of devs to work on the same code base. Fully fledged frameworks are therefore good for big projects with lots of devs working on them.

• Angular uses Typescript which has a similar syntax to Java. If you are using Java Spring Boot on the backend your full stack developers will likely find TypeScript not too dissimilar to Java.

The disadvantage of Angular over ReactJs are:

• the framework has to deal with lots of use cases and this introduces complexity which increases the learning curve

• you cannot easily switch out libraries and use your own chosen ones

• ReactJs uses a virtual DOM to work out what parts of the DOM need updating. This results in increased efficiency over Angular which does not have a virtual DOM.

• ReactJs does not use double binding. The double binding means that when using an input box, it is initially updated with application data. However when you type in it, it is also updating the application data. Behind the scenes Angular adds a listener to listen to your typing. This requires more CPU cycles but it does help you get the job done. In this case the disadvantage is increased CPU cycles.

• If your devs do not know Java they may find the TypeScript used by Angular difficult to understand.

Recommendation:

If you are happy to spend effort dealing with increased learning curve of Angular you will benefit in the following ways:

• The Framework gives discipline and consistency which is great for large applications with lots of devs working on it

• Angular comes with its libraries pre configured so you do not need a senior React developer to set the project up

If your project is not a big one and you have a senior Dev who knows how to set the libraries up then use React as it is slightly faster. Note that newer versions of Angular have been improved so despite Angular not having a virtual DOM it is still almost the same speed as React.

Links

Back: One Page JS

Page Author: JD