Welcome to the free & complete Angular Tutorial.

In this lesson, we are going to learn about Architecture of Angular.

As we know Angular is a platform and framework for developing web applications using HTML and Typescript, we need to understand how the platform is built, using what and other core details of it.

If you already know about Angular architecture, you can jump to other topics by clicking below link:

Take me to other Angular Topics

Let’s get started.

Building blocks of Angular:

The basic building block of Angular applications is NgModules, that provides the grouping of Components in compilation context.

You may now have a question on your mind: What is component?

Components are basically views which comprises of Design elements (UI) and code behind logic. Components also uses services, to perform functionalities that are not related to Views.

So the building blocks of Angular are:

  1. Modules
  2. Componenets
  3. Services

Modules

  • One thing we need to remember here while discussing about Modules: Angular Modules (NgModules) differ from JavaScript (ES2015) modules completely.
  • NgModules associate Components with their relevant service code as single functional unit.
  • Each and every Angular application has one root module, named as AppModule, which gives bootstrap mechanism to launch the application.
  • Like JavaScript modules, NgModules can import and export functionalities from/to other Modules.
  • We can organize our code into different modules that helps in managing complex applications. Designing such a way helps in Lazy loading i.e Loading modules on demand.For ex: We can organize an Angular application into distinct modules like:
    1. Authentication Module
    2. Dashboard Module
    3. Contacts Module
    4. Blog Module

Want to know more about Module? Angular Modules Explained.

Components

  • Each and every component has at least one component, the root component that connects a component hierarchy with the DOM.
  • Component defines a class that contains data and logic, associated with UI.

Deep dive into Components.

Services

  • Service is again a class that has data or logic that has to be shared across components.
  • Dependency Injection (DI) helps keeping the Component class tidy and efficient in delegating the tasks like Logging, fetching data from server etc., to Services.

Learn more about Services here.