Comprehensive Angular Project Setup: Step-by-Step Tutorial for Beginners

by

Angular is a popular framework for building dynamic and modern web applications. Setting up a new Angular project is the first step towards creating powerful, scalable, and maintainable applications. This tutorial provides a comprehensive, step-by-step guide for beginners to set up their Angular projects efficiently.

Prerequisites

  • Node.js installed on your computer (version 14.x or later)
  • Angular CLI installed globally
  • A code editor such as Visual Studio Code
  • Basic knowledge of JavaScript and command line interface

Installing Node.js and Angular CLI

First, download and install Node.js from the official website (https://nodejs.org/). After installation, verify by running the following commands in your terminal:

node -v and npm -v

Next, install Angular CLI globally using npm:

npm install -g @angular/cli

Verify the installation:

ng version

Creating a New Angular Project

Navigate to the directory where you want to create your project and run:

ng new my-angular-app

Follow the prompts to choose routing and CSS preferences. Once completed, navigate into the project directory:

cd my-angular-app

Serving the Application

Start the development server with:

ng serve

Open your browser and go to http://localhost:4200/. You should see the default Angular welcome page.

Project Structure Overview

Understanding the basic structure of an Angular project helps in efficient development:

  • src/app: Contains components, services, and modules
  • src/assets: Static assets like images and styles
  • angular.json: Configuration file for Angular CLI
  • package.json: Lists dependencies and scripts

Creating Your First Component

Generate a new component called hello-world:

ng generate component hello-world

This creates the component files in src/app/hello-world. You can now add content to the component’s template:

Edit src/app/hello-world/hello-world.component.html and add:

<h3>Hello, Angular!</h3>

Adding the Component to App Module

Ensure the component is declared in app.module.ts. Angular CLI automatically does this during generation. To include it in your main template, update src/app/app.component.html:

<app-hello-world></app-hello-world>

Running and Testing Your Application

Save all changes and ensure the development server is running. Refresh http://localhost:4200/ in your browser. You should see “Hello, Angular!” displayed.

Next Steps

Explore Angular features such as routing, services, and forms to build more complex applications. Use the Angular documentation and tutorials for further learning.