Angular Modules: A Basic Infographic for Who’s Confused

Rogério de Oliveira
Mar 2 · 11 min read
Classically “a picture’s worth than a thousand words” nevertheless, a video can be more interesting. Even so, let’s keep on the classical team for while. :D From: A Picture’s Worth 1,000 Words — But A Video’s Worth More

🏁 Intro

Well, this is my first article about Angular and unlike the majority available at the web, this time I’ll try to explain one of its basics concepts in a different way: by pictures and a bit of text.😄For me and most people out there (I believe so), a picture can definitely work better than long texts or bunches of codes especially when we’re dealing with newcomers in some subject.

The angular framework is gigantic and probably you’ll take some time before being good at it.

⚠️ Who is this article intended for?

As you probably could realize in the intro section, here you’ll find just the basics and summarized concepts about Angular’s modules like definitions and how they work. Nothing further than that. Pictures will be used instead of text or codes actually, you won’t find any code here. Thus, this content is especially aimed at those who are starting on Angular or those who are confused about Angular’s modules concepts, but if you want to, feel free and join us.

🤔 What a heck is a module?

Straightforward from official Angular team:

Figure 1 — Modules aside some of its crucial therms.
Figure 2 — By using the “export” keyword, module 3 makes all its internal elements available to module 1 and 2. Finally, modules 2 and 3 can use them by importing it directly from module 3.

🔍What else can dwell inside a module?

Finally, it’s time to demystify what dwells inside a module. I gave some spoilers earlier, referring to all these guys just as “inner elements”. Well, here inner elements could be components, pipes, services, directives as well, or in other words, it’s everything a module can host.

Figure 3 — An Angular module and its inner elements.

Taking all that apart

An Angular app can grow quickly with modules coming up everywhere. Without a suitable approach and guidelines, this turns out in a true nightmare as fast as you can imagine. 🤯 Besides, questions like performance, maintenance and security which you willy-nilly are also at stake. To avoid (or at least mitigate) unwanted situations involving these points, Angular’s team classifies modules according to its responsibility so that we can build a solid and reliable architecture for our apps.

Figure 4 — Root and core modules.
Figure 5 — A shared module imported by the App module should avoid having services inside it.
Figure 6 — Example containing two shared modules: a global one (Shared Module) and a custom one (Audit).

Feature modules

Figure 7 — An Angular arbitrary architecture highlighting the feature module concept.

Types of feature modules

Feature modules can be grouped according to some categories as following:

Figure 8 — Types of feature modules. Inspired on Guidelines for creating NgModules.
Figure 8 — Feature modules characteristics. Adapted from Guidelines for creating NgModules.

Finishing up

Here, we finish our mini journey through Angular’s modules. This content was just an intro, I’d call it “an unusual intro” where we could check what a module is, their categories, and how they work in fact. Unusual due to the way we made it, straightforward, brief, accessible and, of course, using images to illustrate and abstract tricky concepts (the cherry on the cake).

References

- General
Google. Guidelines for creating NgModules. Available at: <https://angular.io/guide/module-types> Accessed on November 03, 2020.

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Rogério de Oliveira

Written by

Postgraduate in Software Architecture - PUC/MG | Computer Engineering - UNIFEI

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Rogério de Oliveira

Written by

Postgraduate in Software Architecture - PUC/MG | Computer Engineering - UNIFEI

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store