Project structure

Previous Next

To understand the project structure, see the screenshot of our project

Project Directory Overview

When we create an Angular project using the ng new command, it generates a structured set of files and folders. Below is a brief description of some key components:

1. node_modules Folder

  • Contains all third-party libraries installed via npm.
  • Should not be checked into version control (e.g., Git).
  • If deleted, it can be restored by running npm install.

2. package.json File

  • Specifies the project's dependencies and scripts.
  • Contains two sections: dependencies (required for running the app) and devDependencies (used during development).
  • To install dependencies, use the command: npm install.

3. .editorconfig File

  • Defines coding standards for consistency among team members.
  • Typically managed by the team lead or project manager.

4. .gitignore File

  • Lists files and folders to be ignored by Git (e.g., node_modules).
  • Can be customized to exclude unnecessary files.

5. angular.json File

  • Contains project configuration settings.
  • Defines stylesheets, scripts, and entry points.
  • Specifies the main entry file: main.ts.

6. package-lock.json File

  • Ensures the same dependency versions are installed across different environments.

7. tsconfig.json File

  • Defines TypeScript compiler options.
  • Determines how TypeScript code is converted into JavaScript.

Understanding the src Folder

The src folder contains all the source code for the Angular application. It includes:

1. app Folder

  • Contains application components, services, and modules.
  • Every Angular project has at least one module and one component.

2. assets Folder

  • Used for storing static files like images, icons, and text files.
  • These files are publicly accessible.

3. Other Important Files

  • index.html: Main HTML file loaded when the application starts.
  • main.ts: Entry point for the application.
  • styles.css: Global stylesheet for the project.

Now if we run our application with command ng serve -o this will lauch our applicaiton in browser

Where is the HTML Content Rendered?

When we open index.html in the browser and inspect its source, we see the following structure:

<app-root></app-root>

The <app-root> tag represents the main component of the Angular application.

Understanding the Main Component

Angular applications use components. The root component is defined in app.component.ts. This file has a @Component decorator:


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
export class AppComponent {
  title = 'shopping-kart';
}

The selector defines the HTML element <app-root>, which loads the template app.component.html.

Modifying the UI

If we open app.component.html, we can see the template. Let's replace its content with:

<h2>Welcome to Angular</h2>

After saving the file, the UI updates dynamically.

Making Content Dynamic

Instead of static text, we can use Angular's data binding:

<h2>Welcome to {{ title }}</h2>

Since title is defined in app.component.ts, changing its value updates the displayed text dynamically.

Conclusion

In this chapter, we learned about angular project atructure,how to run an Angular project, use VS Code for editing, understand different components and modify the UI dynamically.

If you have any questions, feel free to ask. Thank you for reading!

Previous Next

Quick Link

Contact Us Blogs

Contact

info@codeelevate.in

codeelevate10@gmail.com

Newsletter

Subscribe to our Newsletter

©Code Elevate, All Right Reserved.
Thankyou!