LogoLogo
  • Introduction
  • Backend
    • Creating a MongoDB Database
    • Environment Variables
    • Configuring the Mailing Service
    • Seeding the Database
    • Starting the Backend
  • Frontend
    • Starting the Frontend
  • Book Module Tutorial
    • Introduction
    • Backend
      • Create Model
      • Create Service
      • Create Route
      • Test using Postman
    • Frontend
      • Introduction
      • File Structure
      • Defining Concepts
      • Display App in Dashboard
      • Create Module
      • Create Book List Component
      • Create Main Component
      • Create Service
      • Display Book List
      • Add a Book
        • Update Service
        • Create Component
        • Final Code Review
      • Delete a Book
        • Update Service
        • Update Component
        • Final Code Review
      • Conclusion
  • Resources
  • Beginner
  • Advanced
  • Recommended Extensions for Visual Studio Code
  • Troubleshooting
    • Troubleshooting
Powered by GitBook
On this page
  • Component
  • Modules
  • Services
  • References

Was this helpful?

Export as PDF
  1. Book Module Tutorial
  2. Frontend

Defining Concepts

PreviousFile StructureNextDisplay App in Dashboard

Last updated 4 years ago

Was this helpful?

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.

References

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 and the section.

Angular Components Overview : Introduction to modules : What Is a Service in Angular and Why Should You Use it? :

https://angular.io/guide/component-overview
https://angular.io/guide/architecture-modules
https://dzone.com/articles/what-is-a-service-in-angular-js-why-to-use-it
references
BMS Main Page
resources