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.
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.
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.
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
This post is for paying subscribers only
Sign up now and upgrade your account to read the post and get access to the full library of posts for paying subscribers only.