Angular - Exploring the Front-End: Modern Frameworks - Part II

  • Series: Exploring the Front-End
  • Modern Frameworks
  • JavaScript
  • Software Development
  • Angular

Angular is, in a way, the oldest of the three frameworks. AngularJS (or Angular 1.x) was released back in 2010, and was a pretty big deal. It brought new concepts and was for some time considered “the king of modern JS frameworks”. Then React came and brought new concepts, a component-based approach and took the throne for itself.

Google, the main maintainer behind AngularJS, then made a very controversial decision - to rebuild the framework from the ground up, and change the way it works completely. Thus, Angular (or Angular 2+) was born. The naming doesn’t help at all differentiating them: AngularJS is one thing, and Angular (without the “JS”) is another. The first one is the one we’re gonna talk about here!

This is the second post of a series that aims to dive in the three most popular front-end frameworks, exploring their concepts and building the same sample application with each one, trying to find out their pros and cons. You can read the introductory post here.

Base Concepts

Before the code, let’s see some of the concepts behind Angular. I’m doing my best to sum them up in a way that’s not tiring to read, but still easy to understand. You can always delve deeper into them by reading the official Angular docs.

  • It uses TypeScript instead of regular JavaScript. It is a language maintained by Microsoft that provides static typing, interfaces, and overall provides a better experience for developers, specially in more complex apps (I’m a big fan!). While opting out of TypeScript is possible, it is not very encouraged;
  • The framework itself is very modular, which means a lot of functionality is split between multiple packages and needs to be imported separately. This can be a bit of a nuisance while developing, but is actually good to reduce bundle size and improve loading performance in the end product;
  • There’s a heavy use of dependency injection;

Basically, Angular consists of three types of classes (there are more, but these three are the main pillars). They are:

Modules

https://angular.io/guide/architecture#modules

Components

https://angular.io/guide/architecture#components

Services

https://angular.io/guide/architecture#services-and-dependency-injection