What is Angular? Angular Features, Advantages, and More

Angular is an open-source, front-end JavaScript application-design framework maintained by Google and developed in 2010. Angular is written entirely in TypeScript, a superset of or static typing layer on top of JavaScript. Angular is primarily used to build SPA's or single-page applications. 

Angular uses HTML syntax to express your application’s components clearly. It is primarily designed to build testable and scalable user interfaces for web, desktop, and mobile platforms.

JavaScript is the most popular client-side scripting language. Angular and JavaScript bring structure and consistency to web application development and provide scalability and maintainability.

Angular version 2 and above are called Angular and differ from AngularJS, so do not confuse the two.

Features and Advantages of Angular

Custom Component-Based

Angular is a component-based framework, so everything centers around a component or modular development approach organized into NgModules. This means that Angular’s goal is to facilitate the creation of reusable components primarily concerned with data and a template housing that data. This modular approach allows for loose coupling (how much do your different modules depend on each other) and high cohesion (how reliable, reusable, and understandable are the code and module relationships) of large-scale enterprise applications and websites. 

This component-based approach aims to create modules that are as independent as possible from other modules. This approach will minimize the impact of changes to one module on other modules.

The modular approach to Angular might be compared to building a structure with Legos.

TypeScript 

TypeScript is the language used to write Angular. It is a superset of JavaScript. It provided better syntactical structure while making the code easier to understand. Using typescript allows us to catch specific problems early in the development process. For example, if a mistake is made when referencing a variable, TypeScript will identify the error immediately as the mistake is typed. Using TypeScript, we get build-time errors instead of runtime errors. 

Databinding

Angular makes one-way and two-way data binding convenient for pages that contain a large amount of data. When Angular uses two-way binding, any changes reflected on the client-facing pages are reflected in the models and vice versa. Writing extra code to distinguish between HTML elements requiring data binding is unnecessary. 

Routing

Generally speaking, Angular uses client-side routing over server-side routing, meaning that trips to the server are not necessary to determine the route. How is that possible? With Angular routing, you change what the user sees by showing or hiding portions of the display corresponding to a particular component. You can understand how this is possible if you are familiar with JavaScript. Simply put, Angular routing is moving between different views that you have defined. The router interprets the URL and displays its related view in the browser. Most frameworks, like Razor pages, use server-side routing.

Routing Code Example

See the Angular routing code example below in action on StackBlitz.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ComposeMessageComponent } from './compose-message/compose-message.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { authGuard } from './auth/auth.guard';
import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';

const appRoutes: Routes = [
  {
    path: 'compose',
    component: ComposeMessageComponent,
    outlet: 'popup'
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [authGuard]
  },
  {
    path: 'crisis-center',
    loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule),
    data: { preload: true }
  },
  { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      {
        enableTracing: false, // <-- debugging purposes only
        preloadingStrategy: SelectivePreloadingStrategyService,
      }
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }


/*
Copyright Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at https://angular.io/license
*/

Dependency Injection and Testability

Dependency Injection makes unit testing very easy in Angular. Service providers can be injected into components as dependencies, making your code modular, reusable, efficient, and testable.

Out-of-the-box Solutions 

Angular comes with out-of-the-box solutions that can facilitate rapid web development. 

Strong Browser compatibility

Angular supports most recent browsers, including the current versions of Chrome, Firefox, Edge, Safari, iOS, and Android. 

Testing

Angular uses Jasmine to run various tests. The Jasmine framework allows various functionalities to write different kinds of test cases. Karma is the task-runner for the tests. 

Angular Architecture

Angular uses a model-view-controller (MVC) architectural framework. This architectural pattern isolates the application logic (controller) from the user interface layer (view) and supports a separation of concerns.

Below is an example of an ASP.NET Core with Angular project template that Visual Studio automatically generated. The MVC architectural pattern is seen in the directory structure. You can also create standalone TypeScript Angular projects using Visual Studio. 

Limitation of Angular

Steep Learning Curve

Angular has a steep learning curve. Angular has a particular approach to how they want you to develop applications, so you have to understand this unique paradigm. This often makes learning Angular very challenging.

SEO Limitations

Because of its single-page, view-based approach, websites using Angular have limited SEO options and provide poor accessibility for search engine crawlers. 

Verbose and Complex

The Angular syntax can be considered verbose and complex.

Painful to Migrate or Upgrade

Angular Learning Path

To begin learning Angular, familiarize yourself with these basic and advanced topics.

Basic Topics

• Directives 
• Modules
• Decorators
• Components
• Services
• Dependency Injection
• Pipers and Templates

Advanced Topics

• Change Detection
• Zones
• AoT Compilation
• Rx.js

Frameworks Similar to Angular (Angular Alternatives)

• Aurelia
• React
• Vue.js
• Mithril
• Riot
• Knockout
• Backbone
• Polymer
• Ember
• Sencha Ext JS
• Razor
• Blazor

---