Is Angular the same as AngularJS? Is it still supported? Is it still worth learning in 2022?

Developers are often asked these types of questions from juniors looking to learn, or those unfamiliar with how AngularJS diverged from Angular in recent years. Software devs have to stay on top of so many new technologies, so it’s good to know where Angulanvr stands. Will Angular be replaced in popularity with technologies like React? Probably not, but there are a lot of changes happening in the Angular world that are important to know.

What is Angular?

Angular is a TypeScript-based, open-source framework used for building applications, which provides its own sets of libraries and components. It is a standalone framework, not to be confused with AngularJS, which is based on Javascript. It has a closed internal structure, is open to extensibility and imposes a control flow (inversion of control - the Hollywood principle - "Don't call us. We'll call you").

AngularJS was created first, and admittedly Angular was initially supposed to be an upgrade to AngularJS. However, due to a change of approach, and the lack of backwards compatibility, the architects decided to release it as a separate entity. After some time, it turned out that Angular is much more efficient, which caused a lot of interest in this framework by developers. [1]

Of course, this is not the only JavaScript framework available on the market, but Angular is still in the top 5 most popular frameworks. [2]

Introducing the Angular Core

As I mentioned above, the creators of Angular are constantly working on new possibilities, adapting to the prevailing trends, increasing the performance and thus reducing the volume of the size of the framework. There are many tools, technologies and ideas associated with modern Angular. Let’s take a look at some of the important ones:

1. Ivy Engine - introduced in version 9 of Angular, it speeds up the significant loading time of our site. It provides us with faster compilation, smaller packages, and truncates the generated code. It's all thanks to the introduction of Locality and tree-shaking. [3]

2. TypeScript - Angular was written using this technology, and we are also obligated to use it in our application. Its use does not require any additional work from us because it is already configured. Angular significantly contributed to the popularization of TypeScript, and it seems to me that hardly anyone can imagine writing an application without it. Thanks to TypeScript, we can catch errors at the compilation stage. And with strong typing, the code we write using TypeScript is far more readable and converted to JavaScript.

3. Angular CLI - One of the best command line tools to build an application. CLI creates the application skeleton and components. It helps us as developers increase our efficiency in the following ways:

• ng build - compiles our application to an external directory,
• ng serve - builds and serves the application,
• ng generate - generate or modify files based on schematics,
• ng test - runs unit tests [4]

4. Components - These are blocks that make up the application. Here, we combine our logic with the template and styles. The component should be written in such a way that it corresponds to exactly one functionality. Let's try to approach the components so that they are small, easy to test, and of course, don't repeat ourselves. [5]

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'articles';
}

5. Templates - The MVC (model-view-controller) approach is one of the many reasons programmers love Angular. It separates logic from view. In the template, we have access to our HTML where we dynamically pass values ​​from the component, and then our framework automatically renders the DOM when the state of the application changes. [6]

6. Dependency Injection - This pattern has been tightly woven into Angular. In fact, Angular would not exist without it. DI allows us to create websites that share data between components, transfer data between themselves, and also between parents and children. Angular leverages the DI construction so strongly, it can be said that it is a separate module.

In a nutshell, here is how it works:

An Injector object is added to each component. When Angular sees that a component is requesting a dependency injection, it checks whether a given component receives a given dependency. If not, it checks whether there is such a dependency higher up in the parent component, and so on up to Root. If it finds it, it will serve it. If not, it will throw an exception. It is very important here to properly declare the services so that they can be used in the right places of the application, depending on the level at which we need the common data for components. [7]

import { Injectable } from '@angular/core';
import {BehaviorSubject, Observable, Subject} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  getTitle$: Observable<string>;
  getTitleSubject: Subject<string> = new BehaviorSubject<string>('');

  constructor() {
    this.getTitle$ = this.getTitleSubject.asObservable();
  }

  setTitle(title: string): void {
    this.getTitleSubject.next(title);
  }
}

and in Component we provide our services:

import { Component } from '@angular/core';
import { ArticleService } from "../services/article.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'articles';

  constructor(private articleService: ArticleService) {
    this.articleService.setTitle(this.title);
  }
}

7. Angular Router – Page navigation and loading relevant components. Simple and pleasant configuration of paths, which allows us to check authentication. We can also use lazy-loading among other useful things.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { ArticleComponent } from "./components/article/article.component";

const routes: Routes = [
  { path: 'article', component: ArticleComponent }
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

For example, import routes to our module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ArticleComponent } from './components/article/article.component';

@NgModule({
  declarations: [
    AppComponent,
    ArticleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and then we can navigate to article page:

<h1>{{title}}</h1>

<a routerLink="/article">Article</a>

8. Angular Forms – Form management, validations, error handling are just a few interesting aspects that help developers create advanced forms in a friendly way.

9. Angular HttpClient – API communication tool. Angular uses RxJS to handle asynchronous queries. You might wonder why JavaScript natively handles async via Promise. The main advantage of RxJS is the use of the Observer pattern. This gives us the opportunity to listen to the data that comes to us. We can listen to the incoming information and react appropriately, in cases where we do not want to stop listening. Promise, on the other hand, sends us data only once and always returns some data - it can be the value we expect (resolve) or an error (Rejected). Nevertheless, I personally like working with streams. RxJS provides many useful methods that we can use to modify our data, such as: take, takeUntil, switchMap, mergeMap, filter, forkJoin, map. Finally, it’s important to always remember to turn off subscriptions, because we can unnecessarily clutter our HEAP, causing memory leaks. [8]

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subject, takeUntil} from "rxjs";
import {ArticleService} from "../../../services/article.service";

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit, OnDestroy {

  private destroy$: Subject<any> = new Subject<any>();
  constructor(private articleService: ArticleService) { }

  ngOnInit(): void {
    this.articleService.getTitle$
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (title) => console.log(title),
        error: (err: ErrorEvent) => console.warn(err)
        })
  }

  ngOnDestroy() {
    this.destroy$.next(null);
    this.destroy$.complete();
  }
}

10. Angular Animations – A system based on css functionality, which allows us to add animations to our project.

11. Angular PWA - Angular supports Service Workers. This allows us to approach the application as Mobile first, Offline first. Thanks to the use of the Service Worker and the manifest file, we can create a PWA application without the need to download the application from Google Play / App Store. This gives us all the advantages of mobile applications that can also work offline.

12. Angular schematics - "A platform-independent work automation tool that allows you to generate files and modify existing ones, according to clearly defined rules." Generally, every single activity, e.g. adding or modifying components, uses this module. It gives us the ability to configure our custom rules and rules that will be applied in the project. [9]

Where Is Angular Being Used?

Angular is a powerful tool that is suitable for building large enterprise applications, where we need a clear and good file structure, high readability, and logic separation from view. The benefits of choosing this framework are for sure the certainty of continuous application development, multi-platform thanks to the support and easy configuration and work with other libraries, frameworks (Ionic, Electron, etc.), we can create applications for various platforms such as mobile, web, desktop and Progressive Web Apps. Thanks to the rigid file structure and the configured test environments, the application is readable and testable, which translates into application security, lower susceptibility to errors, and high quality of the application, ready for extension. Using the CLI increases the efficiency of the programmer's work by writing a simple command, for example, we have built the entire component with the division into TypeScript files, HTML template and style.

Is Learning Angular Worth It?

In my opinion, definitely yes. Its creators are working on its development and react to the changing world. They make every effort to make it more flexible, faster by using the latest technologies and programming techniques. Angular uses a lot of interesting solutions based on design patterns. The structure is so well thought out that it helps programmers develop good programming habits. It also has the support of an active and extensive community around the globe, making it one of the most in-demand, and popular frameworks - at least until the next best thing comes around!

[1] https://www.davinci-studio.com/pl/blog/jak-dziala-angular

[2] https://insights.stackoverflow.com/survey/2021#web-frameworks

https://medium.com/@order_group/best-web-frameworks-and-languages-to-use-in-2022-c9ac4b90ad57

https://towardsdatascience.com/top-10-in-demand-web-development-frameworks-in-2021-8a5b668be0d6

[3] https://www.telerik.com/blogs/first-look-angular-ivy

[4] https://angular.io/guide/what-is-angular#angular-cli

[5] https://angular.io/guide/what-is-angular#components

[6] https://angular.io/guide/what-is-angular#templates

[7] https://typeofweb.com/dependency-injection-w-angular-2

[8] https://mydaytodo.com/rxjs-observables-vs-javascript-promise/

https://betterprogramming.pub/observables-vs-promises-which-one-should-you-use-c19aef53c680

[9] https://www.angular.love/docs/schematics-tutorial/wprowadzenie/