Defining Concepts
In this part we will define some terms and concepts that will repeatedly mention in this section. It is crucial to know what you are doing (or at least have a general idea) instead of blindly writing code (even if it works!).
Component
A component is the main building block of an Angular application, it is composed of: an HTML template that describes what to render on the page, a TS (TypeScript) class that defines the behavior of the component and a CSS selector that defines how the component is used within a template.
To put things into perspective, here is the main page of the Book Management System:
It is divided into multiple components, where each component has its own responsibility (and it can be divided even more).
We have a navbar component, that sits above another component called BmsMainPageComponent which itself is also containing another component, ListBooksComponent This feature allows us to reuse parts of code systematically all over the project, like the navbar for instance, without the need of rewriting it each time.
Modules
A module is a mechanism that allows to group components, services (which we will define later on in this part), pipes, etc. It is a container for a cohesive block of code that is dedicated to a specific domain. Remember that a good design should be loosely coupled and highly cohesive! In this case, the module is the whole Book Management System.
We can export some elements from the module so that they can be accessed by other modules or keep them hidden so that they are only used internally.
Services
Angular services are singleton object that are instantiated only once during the life cycle of an Angular application. They are used to to share business logic, data and functions across components and modules of the application.
Now these are broad definitions, as we did not want to get into detailed explanation, otherwise this guide would become fairly long and cumbersome to understand. If you are interested in learning more about these concepts, feel free to check the references and the resources section.
References
Angular Components Overview : https://angular.io/guide/component-overview Introduction to modules : https://angular.io/guide/architecture-modules What Is a Service in Angular and Why Should You Use it? : https://dzone.com/articles/what-is-a-service-in-angular-js-why-to-use-it
Last updated
