Angular - Exploring the Front-End: Modern Frameworks - Part II
Published on 21 Dec 1991 2 min read
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
Related Posts
See all

Smarter, Lighter, Better Images: A Guide to Optimization
10 min readDo you know how big the images displayed on your website are? When you open a page, the browser starts...
Click to read more…
How to fix your Favicons
4 min readFavicons kinda suck. They should be a simple icon that identifies your webpage on a bunch of scenarios, i.e. the...
Click to read more…
CSS Scroll Snapping - Improve Scrolling without JS
4 min readCSS is evolving constantly and the past few years have brought us amazing stuff. It is getting easier to make...
Click to read more…