Getting Started with Angular: Chapter 2

In the previous chapter, we learned what Angular is, why it is widely used, and how to create our very first Angular application using Angular CLI.

Now that the application is ready, the next step is to understand how Angular organizes its files and folders. At first look, an Angular project may look confusing because it contains many files. However, once you understand the purpose of each file, navigating an Angular project becomes much easier.

In this chapter, we will explore the Angular project structure and create our first custom component.

Understanding the Angular Project Structure

Open the Angular application that you created in Chapter 1. You will notice several folders and configuration files.

Every file has a specific purpose. Although you do not need to memorize everything on Day 1, it is important to understand the files that you will use frequently during development.

The basic project structure looks similar to the following:

my-angular-app

├── src

├── node_modules

├── angular.json

├── package.json

├── tsconfig.json

└── README.md

Let us understand these one by one.

node_modules

The node_modules folder contains all the packages and dependencies required by your Angular application.

Whenever you install a package using npm, it is automatically downloaded into this folder.

For example:

npm install bootstrap

After running this command, Bootstrap will also be available inside the node_modules folder.

Since this folder contains thousands of files, you should never modify anything inside it manually.

src Folder

The src folder is the heart of every Angular application. Almost all your application code will be written inside this folder.

When you expand it, you will find files similar to these:

src

│

├── app

├── assets

├── styles.css

├── index.html

└── main.ts

Let's understand each of them.

app Folder

The app folder contains the application's components, services, pipes, directives, and other business logic.

Initially, Angular creates a default component called App Component. Inside the app folder, you will find files similar to these:

app.component.ts
app.component.html
app.component.css
app.component.spec.ts

These files work together to create a single Angular component.

app.component.ts

This file contains the TypeScript logic for the component.

Here, you write variables, methods, API calls, and application logic.

Example:

export class AppComponent {
title = 'Angular Learning';
}

The variable can later be displayed inside the HTML template.

app.component.html

This file contains the HTML code for your component.

Example:

<h1>{{ title }}</h1>

The double curly braces are known as Interpolation, which displays data from the TypeScript file.

When the application runs, the output will be:

Angular Learning

This is the CSS file:

app.component.css

This file contains styles that belong only to the current component.

Example:

h1{
    color: blue;
}

These styles remain scoped to the component and do not affect other components unless configured otherwise.

app.component.spec.ts

This file is used for writing unit test cases. As a beginner, you can ignore this file for now. We will learn about testing in later chapters.

assets Folder

The assets folder is used to store static resources such as:

• Images
• Icons
• Fonts
• JSON files
• Videos

Example:

assets/images/logo.png

You can use these files anywhere in your Angular application.

styles.css

This file contains global styles. Unlike component CSS files, styles written here are available throughout the application.

Example:

body{
    margin:0;
    font-family:Arial, sans-serif;
}

This is the index.html file:

index.html

This is the main HTML page that loads your Angular application.

You will notice a tag similar to this:

<app-root></app-root>

Angular automatically replaces this tag with your application's content.

main.ts

This is the entry point of every Angular application. It loads the root component and starts the application.

Whenever you execute:

ng serve

Angular begins execution from this file.

package.json

The package.json file contains important information about your project.

It includes:

• Project name
• Project version
• Installed packages
• Scripts
• Dependencies

For example:

"scripts": {
"start":"ng serve",
"build":"ng build"
}

These scripts allow us to execute Angular commands more easily.

angular.json

This file contains the Angular project configuration.

Here you can configure:

• Global styles
• Build settings
• Assets
• Project configurations

Normally, beginners do not need to modify this file frequently.

Creating Your First Component

Components are the building blocks of every Angular application.

Whenever you create a new page, section, navbar, footer, or dashboard, you usually create a new component.

Angular CLI makes this process very simple. Run the following command:

ng generate component home

or the shorter version:

ng g c home

Angular automatically creates the following files:

home

│

├── home.component.ts

├── home.component.html

├── home.component.css

└── home.component.spec.ts

Everything is created automatically without writing boilerplate code.

Displaying the Component

Open home.component.html and write:

<h2>Welcome to Angular Learning Series</h2>

Now open app.component.html and replace the existing content with:

<app-home></app-home>

Save the files. Open your browser and refresh the application.

You will now see:

Welcome to Angular Learning Series

Congratulations! You have successfully created and displayed your first custom Angular component.

Why Components Are Important

Angular applications are built using multiple small components instead of one large HTML page.

This approach offers several advantages:

• Code becomes easier to understand.
• Components can be reused.
• Maintenance becomes simpler.
• Teams can work on different components independently.
• Applications become more scalable.

For these reasons, components are considered the foundation of Angular development.

Summary

In this chapter, we explored the Angular project structure and understood the purpose of the most commonly used files and folders. We also learned how to create our first custom component using Angular CLI and display it inside the application. Understanding the project structure is an important milestone because every Angular application follows the same organization.