What makes Angular so powerful?

There are a lot of factors behind the growing popularity of Angular. One of those being the more and more realization of the potential of Single-Page Applications.

I believe there are many reasons why someone may choose Angular for the development process. In What to learn in Angular? we discussed the wide range of features available in Angular and all of these contribute to its usefulness. However, in this post, I am picking out 3 things.

TypeScript

JavaScript though very popular and useful, being a weakly typed language may bring in some natural sources of errors. Someone who is much into a properly organized form of programming may sometimes feel a little bit uncomfortable with the way weakly typed languages handle the data types. And we need to be a bit extra cautious indeed while working with them as they do can let the programmer introduce some common errors in the code (especially runtime errors can get difficult to debug sometimes).
TypeScript facilitates developers to follow that systematic type checking approach. This can help to catch errors at a much early stage and prevent them from reaching the runtime phase.

Encapsulation

I would say Angular is an Encapsulation marvel. It's almost everywhere. Most of us come across encapsulation as a fundamental concept of Object-Oriented Programming (OOP). But, usually, we tend to miss the realization of the concepts like Encapsulation, Abstraction, etc. in the practical world.
Maybe Angular can help in that realization!

Encapsulation in its simplest form can be understood as "To put the related things together." For example- A "Class" puts together various methods, properties, etc. which tend to be related or used together in some way.

Now, let's think about Angular. It uses Encapsulation top to bottom. 
Components- They bundle a certain section of the UI together- be it their template (HTML), or their stylings (CSS/SCSS), or their logic(Typescript). This is what makes a component.

Furthermore, related components, pipes, directives, etc. all can be bundled together using modules.

There is 1 more thing worth noticing. The CSS codes you write for one component doesn't have an effect on the other components. This might be taken for granted by many of us and we may argue- "Of course they don't as they are different components."

But, think about it. As I mentioned in What is a Single-Page Application?, an Angular app is ultimately a Single Page Application which effectively means that everything is on a single HTML page (all the components). So, a CSS applied for a particular section of that HTML page not messing up with the other sections (even if we use the same CSS selector in different components) is definitely not a coincidence. This is being possible only because Angular strongly implements Encapsulation for its views which makes things so intuitive for us.

To see this particular thing that I just mentioned in action- you may override this default behavior that Angular offers. Just use encapsulation: ViewEncapsulation.None in your component.ts file and you will soon find your CSS leaking into the other components. This may be verified through the Inspect window.

Inbuilt Routing

The routing in Angular forms a crucial part of the Single Page Application. Many times we may miss the significance of routing provided in Angular as we may think that our simple old HTML was also able to do this through anchor tag and href attribute.
In reality, however, these two are very different things. And the difference again here is similar to what we had discussed in What is a Single-Page Application?

When we use a href we essentially reload the whole app whenever that link is clicked. This causes the app to lose its state. On the other hand, while using the router link provided by Angular, we just tell Angular which view we want to navigate. It calculates the URL on our behalf and then the running javascript displays or hides the corresponding views. And these two approaches may appear the same on the surface but they are poles apart in reality. The latter approach gives us the fluid experience that we usually expect from a SPA.
Ideally, an Angular app once launched should never reload itself (unless the user explicitly reloads the page).

For more insights, watch this video-

Comments

Post a Comment

Popular posts from this blog

What are Bootstrap breakpoints?

Image
  As I mentioned in the previous post  What is a Responsive Web page?  , breakpoints play a very important role in making a webpage responsive. So, let's now try to understand breakpoints and see them in action. X-Small: Portrait phones (less than 576 px) Small: Landscape phones (576 px and up) Medium: Tablets (768 px and up) Large: Desktops (992 px and up) Extra Large: Large Desktops (1200 px and up) Extra Extra Large: Larger Desktops (1400 px and up) By default, these are the categories into which all screen sizes are classified. Bootstrap provides different classes for these categories- sm , md , lg , xl , and xxl . These are called responsive classes. Let's say we use lg with some other Bootstrap class "A" what it would mean is that particular class "A" will get applied for all the screen sizes >= 992px. Also, suppose we want to apply the "A" class for the 'Large' category but a different class "B" for the 'Extra Large&
Read more

What is Bootstrap Grid System?

Image
 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of  What is Bootstrap? Why use it?  the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System. Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen. Let's write this simple piece of code:- < div   class = "row mt-4 text-center" >      < div   class = "col-12 border bg-info py-4" >         12/12 or 100% of total width available &l
Read more

What is Bootstrap? Why use it?

Image
  Prerequisites- Basic HTML and CSS   Long story short- Bootstrap is a CSS framework. What's a framework? Now, this is something that most of us usually not have a clear understanding about. We often misunderstand 'language' with a 'framework'. However, there's a difference. Let's try to understand it through an example. Let's try to design a very simple login page with HTML and CSS. < form >      < div >          < label   for = "emailField" >             Email address </ label >          < input   type = "email"   id = "emailField" >      </ div >      < div >          < label   for = "passwordField" >             Password </ label >          < input   type = "password"   id = "passwordField" >      </ div >      < div >          < button   type = "submit" >             Login </ button >      </ d
Read more