Introduction

In this article we are going to understand Angular application architecture at a high level.

Module

Module is the first building block of angular application. Angular apps are modular in nature. So an angular application is just a collection of modules. For example we can have a Login feature in any application having 'User' and 'Guest' module. But in the end, module is just a line of code that is imported or exported.
Architecture of Angular Application

One must know that there is at least one module called the Root Module.

Module

Each module is made up of components or services. Modules interact together to render the view and run the application.

Components

Components control the portion of view on the browser. In any application there can be separate components for navigation, sidebar and content. There should be at least one component called root component or AppComponent by convension. All other components will be nested on Root component. Each component contains a HTML template that defines the view and Class that handles the logic of that particular view.
Architecture of Angular Application

Services

Services are nothing but the Business Logic.

Angular App - One or more modules together forms the angular application.

Now let us go to our project folder. You will see lots of files. Let's have brief information about them.

The picture below defines how the we inject services to module and how the property/event binding is being done on a single module.

Prerequisitees

Let us create a sample TestApp; for this you should have installed the below for development environment,

  1. Node
  2. Npm (comes when you install node)
  3. Angular CLi.
  4. Text Editor.

For creating a new application run the below command on your location.

> ng new TestApp

Once your command is completed you will have TestApp folder created inside your sample folder.

Now you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI” if you want the installation and introduction from the basics and start with execution of the sample application.

Architecture of Angular Application

package.json

This file contains the dependencies and devDependencies which are nothing but the libraries or module that are required to your Angular application to work. Packages here are installed when you have run the command 'ng new hello-world' and all the packages get installed on folder 'node_modules'. We are also having some scripts to run the command. 'ng serve' is one of them. 'npm start' also call 'ng serve' internally.

src

This is the source folder where we have main.ts file which is the entry point to our Angular application. We have app directory inside src folder. It contains app.module.ts which is the root module of the application and also app.component.ts which is the root component of the application.

Navigate inside your project folder to start running the application.

> cd TestApp

When we run the application with 'ng serve' command, the execution comes to the main.ts file, over here we bootstrap or kickstart the AppModule.

In app.module we bootstrap or kickstart the AppComponent. Now this AppComponent has two things, the HTML template and the class that controls the logic of view.

In the typescript file we have a class AppComponent which is having a property 'title' and this property is being used in view HTML. So when we run the application we will see 'Welcome to the app!' where app is nothing but the property of the class component that is being rendered.

So when you change the property 'title' value it will automatically reflect to the browser and change the value.

So this is the basics of Angular and a sample Angular application.