Angular architecture and file structure by creating the first project Hellow World

To create an angular project, create a folder to store your application in any directory you want.

After creating the folder open your command terminal and go into the folder. For that first select the drive by entering the drive name, then give the cd <your folder location>

After entering the folder, type the command below to create a new angular project,

ng new <your project name>

Keep some patience as the command will take a few min, and after completion, it will create a project folder inside your application folder.

Now go back to your terminal and navigate to the project name by typing the command cd <Your project name>

Now run the command ng serve to run your project. Once the compilation will be completed you can be able to open your project, in your browser by typing localhost:4200 in your browser’s address bar. And then you can be able to see some structure displayed in your browser, which is provided by your angular application.

It is very easy to create your first application by typing some commands in your command prompt using angular CLI, but it is also very important to know the architecture of an angular application.

The architecture of an Angular application

The first building block is Module:

Angular apps are modular in nature, So an angular application is a collection of many individual modules.

Angular architecture and file structure by creating the first project Hellow World : Angular Tutorial | Code Mystery

Here can be said the user is a module and also the Admin is also a module which is nothing but some line of code that can be imported or exported.

  • Have to make a note here that every angular application has at least one module which is the root module, which is also called the app module

Component

Now it can be said that a module is made of some component.

Suppose you are making an application that has a navigation bar, left sidebar, body container, and a footer and soon. So each part like the nav bar or the body contains or the footer or so on will be one component.

So a component controls a portion of the view of the browser.

Again each Angular application has at least one component which is the root component. that is called app-component, in the case of angular application. All the other components will be nested inside the root component.

Angular architecture and file structure by creating the first project Hellow World : Angular tutorial | Code Mystery

Each component contains

  1. Html template to display the view
  2. Class to control the particular view
  3. A style is used to make the style of the particular portion of view and the style is imported by the class file.

Services

In one sentence services is a class that provides data to the component class.

Now the module

As have already discussed a few lines before about the module, We are representing the module in one sentence and in a graphical representation.

So the module is the collection of the components and services.

Angular architecture and file structure : Angular 2 and above tutorial | Code Mystery

Graphically representation of Angular Architecture

Angular architecture and file structure : Angular 2 and above tutorial | Code Mystery

So module exports and imports the code as required and finally rendered the view in the browser.

Share The Post On -