A todo app is the equivalent of a ‘Hello world’ application for front-end development. While it covers the CRUD aspect of creating an app, it often only scratches the surface of what a framework or library can do.

Angular seems to always be changing and updating — but in reality, there are certain things that remain the same. Here’s a rundown of the core concepts you need to learn when it comes to Angular in order to properly leverage the JavaScript framework.

There’s a lot to learn when it comes to Angular and a lot of us get stuck in the beginner’s circle simply because we don’t know where to go or what to search up. This is a comprehensive guide (and a quick summary of Angular itself) I wished I had when I first started out with Angular 2+.

1. Modular Angular Architecture

In theory, you can put all your Angular code on one page and into one massive function, but it’s not recommended, nor is it an efficient way to structure your code and defeats the purpose of Angular’s existence.

Angular uses the concept of modules heavily as part of the framework’s architecture. This is in reference to the collection of code that has a single reason for existing. Your Angular app is essentially made up of modules — some stand alone and some shared.

There are multiple ways to structure your modules within your application and digging into the different architectural structures can also help determine how you’ll scale your app as it grows. It can also help isolate your code and prevent code coupling from occurring.

What to Google:

• Angular architecture patterns
• Scalable angular application architecture

My take on the topic:

• What does Modular Architecture in Angular even mean?

2. One-way Dataflow and Immutability

Way back in Angular 1, two-way binding captured the hearts of many front-end developers. It was essentially one of Angular’s original selling point. However, over time it started to pose problems in terms of performance when the application started to become more complex.

It turns out you don’t actually need two-way binding everywhere.

Two-way binding is still possible in Angular 2+, but only when it is explicitly requested by the developer — thus forcing the person behind the code to think about the direction and flow of their data. It also allows the application to become more flexible with data by determining how data should flow.

What to Google:

• Angular data flow best practices,
• Uni-directional flow in Angular,
• Advantages of one way binding

My take on the topic:

• The Tale of Unidirectional Dataflow in Angular

3. Attribute and Structural Directives

A directive is an extension of HTML through custom elements. Attribute directives let you alter the properties of an element. Structural directives change the layout by adding or removing elements from the DOM.

For example, ngSwitch and ngIf are structural directives because it evaluates the parameters and determines if parts of the DOM should exist or not.

Attribute directives are custom behaviors attached to the element, component or other directives.

Learning how to use these two directives can extend your app’s capabilities and reduce the amount of duplicate code in your project. Attribute directives can also help with centralizing certain behaviors that are used across different parts of the app.

What to Google:

• Angular attribute directives,
• Angular structural directives
• Angular structural directive patterns