IONIC Section 4 - 4.18 Why Angular ?

Click here for more videos available on our youtube channel !

In this module, we learned a lot about the basic Ionic components and saw that the official documentation is the ideal place to find every possible configuration. You cannot memorize them all — you will learn them in more detail through practice — so it is completely normal to check the documentation first before starting a design. Now the question is: why use Angular? There are three main reasons.

1. Avoid reinventing the wheel

Doing everything by yourself takes longer and gets more complicated as the logic grows. We do not want to reinvent existing implementations or directly manipulate the DOM. We want to control what our DOM should look like (a list of products, for example) without writing the rendering logic by hand. We just want to write rules like "add a product", "validate the input" or "fetch data from a server", and let the framework take care of the rest.

2. State management, services and dependency injection

We also do not want to manage state ourselves. In larger applications, propagating data correctly and updating different parts of the UI when something changes elsewhere can become very tricky. Angular makes this much easier through its services and dependency injection. To avoid unpredictable behavior and a lot of bugs, using a structured state management approach is a huge benefit.

This also applies to Ionic controllers like the ion-alert we manually created and accessed via document.createElement in plain JavaScript. With Angular + Ionic, we can simply inject the alert controller — thanks to the wrapper packages Ionic provides around the core web components — and start using it directly, without dealing with query selectors and appending elements to the DOM.

3. Powerful routing for multi-page apps

Finally, real applications need several pages: tabs, product lists, user profiles, and so on. Our budget tracker only had one screen, with no navigation, but most apps need much more. Ionic has its own routing, but Angular's router is more powerful: it offers smarter routing, advanced features like guards, lazy loading and URL query parameters, and a clear structure to organize navigation.

That is why we will use Angular from the next section onwards: it helps with complex logic, lets us focus on the rules of our app while the framework handles DOM updates, and gives us clear conventions for structuring an application with components, directives and services. It also helps with services, bindings and routing as well as data transfer and lazy loading. I will show you in detail how to set up an Angular + Ionic project (we have already done it briefly), and we will move on to that in the next section.