Angular Understanding Angular Project Structure Complete Guide

Complete Examples, Step by Step for Beginners: Understanding Angular Project Structure

Introduction

Prerequisites

1. Basic knowledge of HTML, CSS, and JavaScript.
2. Node.js and npm (Node Package Manager) installed on your machine.
3. Angular CLI installed globally. You can install it using:

   npm install -g @angular/cli
   

Step-by-Step Guide

Step 1: Create a New Angular Project

Let's start by creating a new Angular project called "AngularProject".

Run the following command in your terminal:

ng new AngularProject

You'll be prompted with a few questions:

• Would you like to add Angular routing? (Y/n): Choose based on your requirement. For simplicity, choose N now.
• Which stylesheet format would you like to use? (css, scss, sass, less, stylus): Choose css for simplicity.

Navigate into your project:

cd AngularProject

Step 2: Explore the Project Structure

Open the project in your code editor. Here's what your project structure will look like:

AngularProject/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── assets/
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   ├── environment.ts
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tsconfig.tsbuildinfo
├── .browserslistrc
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

Let's break down this structure:

Root Directory Files

• angular.json: Configuration file for Angular CLI.
• package.json: Lists dependencies and scripts for your application.
• tsconfig.json: TypeScript compiler configuration.
• tslint.json: Configuration for TypeScript linting.
• README.md: Project overview.
• .browserslistrc, .editorconfig, .gitignore: Configuration files for various tools.

src/: This directory contains all your Angular application code.

• main.ts: Entry point for the application, where you bootstrap AppModule.
• index.html: The main HTML file rendered by the browser.
• styles.css: Stylesheet used for the application (global styles).
• favicon.ico: The favicon of your application.

assets/: This directory is for static files like images, fonts, and other assets.

• For example, you can place images here and reference them in your templates.

environments/: This directory contains environment-specific configuration files.

• environment.ts, environment.prod.ts: Configuration files for development and production environments.

app/: This is the main application module directory.

• app.component.ts: The main component of the application.
• app.component.html: The template for the main component.
• app.component.css: Stylesheet for the main component.
• app.component.spec.ts: Unit tests for the main component.
• app.module.ts: The main module of the application.

Component Breakdown

• app.component.ts: This is the main component of your application. It includes TypeScript code that interacts with the template.

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

• app.component.html: This is the template file for the main component. It contains HTML and data bindings.

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

• app.component.css: This is the styles for the main component. It can include CSS or SCSS/SASS, depending on your configuration.

  h1 {
    color: blue;
  }
  

• app.module.ts: This is the main module of the application. It includes declarations, imports, providers, and the bootstrap component.

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

Step 3: Serve the Application

To see your application in action, run the following command:

ng serve

After a few moments, the terminal will display a message indicating that the application is running. Open your browser and navigate to http://localhost:4200/. You should see the title of your application displayed.

Step 4: Create a New Component

Let's create a new component to understand how Angular's project structure works with additional components.

Run the following command to generate a new component named "hello":

ng generate component hello

This command creates a new folder inside the app/ directory with the following files:

• hello.component.ts: TypeScript code for the component.
• hello.component.html: HTML template for the component.
• hello.component.css: Stylesheet for the component.
• hello.component.spec.ts: Unit tests for the component.

The hello.component.ts file looks like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

The hello.component.html file looks like this:

<p>
  hello works!
</p>

To use this new component, you need to include it in the template of an existing component. Open app.component.html and add the <app-hello> selector:

<h1>{{title}}</h1>
<app-hello></app-hello>

Save your changes and ensure ng serve is running. Refresh your browser, and you should see the message "hello works!" displayed below the title of the application.

Step 5: Organize Components

As your application grows, you'll want to organize your components into modules. Let's create a new module named "feature" to hold our new component.

Run the following command to generate a new module named "feature":

ng generate module feature

This command creates a new folder inside the app/ directory with the following files:

• feature.module.ts: TypeScript code for the module.

Next, move the hello component into the feature module. You can do this manually:

1. Move the hello folder from app/ to app/feature/.
2. Open app/feature/feature.module.ts and import HelloComponent. Include it in the declarations array.

Your feature.module.ts file should look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HelloComponent } from './hello/hello.component';

@NgModule({
  declarations: [HelloComponent],
  imports: [
    CommonModule
  ]
})
export class FeatureModule { }

Now, you need to import the FeatureModule into the AppModule to make the HelloComponent available to the rest of the application.

Open app/app.module.ts and import FeatureModule. Include it in the imports array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FeatureModule } from './feature/feature.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, the HelloComponent should work as expected, displaying the message "hello works!" below the title.

Conclusion

Congratulations! You've completed your first Angular project and gained a solid understanding of the Angular project structure. You learned how to create and organize components, as well as how to use modules to manage larger applications.