The advantages of using Angular

Angular is a component-based framework, which means that we develop parts of our applications into smaller pieces, and we can reuse these pieces throughout the application. This feature reduces boilerplate code and code errors by ensuring there’s not as much repetitive code. One of the main advantages of Angular is its language. Let’s take a closer look.

TypeScript-based framework

Angular is a TypeScript language-based framework. This language is a significant advantage since TypeScript offers features that are beneficial to development. In addition, it is a superset of JavaScript, which added new concepts that make code maintainable and effective:

Figure 1.1 – TypeScript – a superset language

As we can see, TypeScript is built on top of ES6 and JavaScript, which is intended to add more features for development. Some of TypeScript’s components include Generics, Types, and Interfaces, which we know are directly related to object-oriented programming (OOP). Now, let’s look at another advantage.

Static type data

TypeScript can define static type data, which allows variables to be strictly typed. Compared to plain JavaScript, the compiler alerts you if there are any type-related mistakes – that is, which errors were caught at runtime. Thus, TypeScript can avoid mistakes in production by prompting you with these issues at compile time.

Predictability and maintainability

Since TypeScript is strictly typed, this contributes to the concept of predictability. For example, a variable is declared as a number. Therefore, it will always stay a number throughout the application, and functions will specify how to implement them as all parameters are also strictly typed. Furthermore, TypeScript is also maintainable as it gives developers the power to debug applications at compilation time.

IDE support

Since TypeScript is becoming a more widely used language, more IDEs are supporting it. IDEs offer several features such as code navigation, autocompletion, and plugins.

Microsoft Visual Studio is the primary IDE that’s used for TypeScript. However, some IDEs and editors are also available for running TypeScript:

• Atom: A cross-platform editor
• Eclipse: An IDE that has a plugin for TypeScript
• Visual Studio Code: A lightweight cross-platform editor by Microsoft

OOP

TypeScript is an object-oriented language, which means it supports concepts such as classes, interfaces, and inheritance. OOP is very scalable as we develop our applications into objects, which can be an advantage if we’re developing growing applications.

Early spotted bugs

Browsers do not understand TypeScript directly. Instead, they use transpilers, which compile the code into plain JavaScript. Here, all errors related to syntax and types are caught, allowing developers to worry about the code logic instead.

These are just the advantages of the TypeScript language. Now, let’s look at the benefits of Angular itself.

Support for large enterprise applications

Angular is considered an all-in-one package framework in that most of the standard features that are needed to build an application are already included. This includes modules. For example, to use forms in an Angular application, we must import FormsModule and ReactiveormsModule. Other examples are navigation and routes. Angular provides RouterModule so that you can create routes within the application.

Single-page application

Angular is a single-page application (SPA), which means that when a user navigates from one page to another, the page doesn’t reload as it’s the data that’s being fetched by the server. In addition, the client’s resources are independent and are already loaded in the browser, which contributes to the loading performance of the application.

Progressive web apps (PWAs)

Progressive web apps (PWAs) are becoming a trend nowadays. They are a solution that allows web applications to run on mobile apps, as well as different platforms, both online and offline. It is straightforward to configure Angular as a PWA thanks to its schematics – with just a single line of code, your Angular app is configured. PWAs can also be uploaded into the Android Play Store and Microsoft Store using PWA Builder.

The following command uses the Angular CLI to convert our application into a PWA:

ng add @angular/pwa

The Angular CLI

We don’t need to create or configure Angular from scratch. Instead, we can use the Angular CLI, which helps install the necessary dependencies to run our Angular application successfully. Although the schematics features are responsible for creating the required files, installing the packages, and configuring the values that we need for our application, the Angular CLI generates boilerplate code for modules, components, services, and directives for faster development.

In the following code, we’re using npm to install the Angular CLI and generate our code using the ng command:

//command for installing angular CLI
npm install -g @angular/cli
//command for creating a new Angular App
ng new –project-name
// command for creating a new Component
ng generate component –component-name
// command for creating a new Service
ng generate service –component-name
// command for creating a new Module
ng generate module –component-name

Module and component-based framework

Angular is grouped into modules, which makes it easier to maintain the code’s structure. In addition, each part of the application can be grouped by its function and placed in a single module, making it easier to navigate the application’s features. It is also beneficial in unit testing as the code is tested separately, allowing for complete quality control.

Creating code as components promotes reusability and boilerplate reduction. Let’s look at an example of a navigation menu:

<!— Example code for nav bar -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nav bar</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

The navigation bar must be present on every page of our application. This process will cause redundant code, which means we will have to repeat this code over and over again. However, in Angular, it has been developed into a component, allowing us to reuse the code in different parts of the application. A specific selector is assigned to the navigation bar code and used as the HTML tag for the component, as shown in the following code:

<!—example selector for the navigation bar component-->
<app-navigation-bar/>

Cross-platform-enabled

Angular is used to build applications for the web, as well as native mobile and desktop applications. This is now possible through frameworks, such as Ionic, NativeScript, and Electron. Aside from PWAs, Ionic and NativeScript are also used to create mobile apps using Angular. On the other hand, Electron is a framework that transforms your Angular app into a desktop application using a similar code base. This feature makes Angular very flexible as a single framework can cover all the platforms for your application.

Web components

Angular supports web components, which are also known as Angular elements. Here, the idea is to break an application into smaller pieces and distribute it into an independent application or package that can be distributed and used on other applications. Angular elements cover the concepts of micro frontends. Every element has a pipeline for deployment. This component can also be used in different JavaScript frameworks, such as React and Vue.

Supports lazy loading

Loading all the JavaScript code in the client browser could introduce some issues. If the applications get more extensive, more code would be packed into one chunk. We don’t want to bootstrap all of our code as this would cause our application to load slowly when it’s started for the first time. We only want to load what is needed on demand. The lazy loading feature by Angular solves this. It only loads the modules, components, services, directives, and other elements of the application that are needed for a specific route. This feature reduces the loading time as the user initially opens the application.

In the following code, we’ve defined some routes as an array where we add new routes as an object. To enable lazy loading, we must use the loadChildren properties to load the modules on demand:

const route: Routes = [
    {
     path: "about",
 loadChildren: () =>
   import("./src/app/AboutModule").then(m =>
      m.AboutModule)
    },
   {
     path: "contact",
     loadChildren: () =>
       import("./src/app/ContactModule").then(m =>
         m.ContactModule)
    }
];

In the preceding code, as the user navigates to the about path, it will only load AboutModule, which contains the resources for that specific route. It will not load the resources under ContactModule unless the user navigates to the contact path.