🚀 Check Out My YouTube Channel! 🚀

Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel devDive with Dipak. I post practical full-stack development videos that complement my blog posts. Your support means a lot!

In Day 1, we introduced Angular and its key features. Today, we will focus on setting up your Angular development environment. Having a well-configured environment is crucial for smooth development and testing of Angular applications.

Prerequisites

Before setting up your Angular development environment, ensure you have the following tools installed on your system:

1. Node.js and npm: Node.js is a JavaScript runtime that allows you to run JavaScript on the server-side. npm is the Node Package Manager used for installing and managing dependencies.

2. Angular CLI: The Angular Command Line Interface (CLI) is a powerful tool that simplifies the process of creating, building, and maintaining Angular applications.

Steps to Set Up Angular Development Environment

Step 1: Install Node.js and npm

1. Visit the Node.js website and download the latest version of Node.js for your operating system.
2. Follow the installation instructions to install Node.js and npm.
3. To verify the installation, open a terminal or command prompt and run the following commands:

   node -v
   npm -v

These commands should display the installed Node.js and npm versions.

Step 2: Install Angular CLI

1. Open a terminal or command prompt and run the following command to install the Angular CLI globally:

   npm install -g @angular/cli

1. Once the installation is complete, you can verify the installation by running:

   ng --version

This command will display the installed Angular CLI version along with other relevant information.

Step 3: Create a New Angular Project

1. To create a new Angular project, navigate to the directory where you want to create the project and run:

   ng new my-angular-app

1. The Angular CLI will prompt you to choose various options such as routing, stylesheet format, and more. Make your selections based on your project requirements.

Step 4: Serve the Application

1. Navigate into the newly created project directory:

   cd my-angular-app

1. Start the development server by running:

   ng serve

1. Your Angular application will be available at http://localhost:4200/. Open this URL in your browser to see your application running.

Conclusion

Setting up your Angular development environment is the first step towards building robust and efficient Angular applications. By following these steps, you now have a fully functional Angular development environment ready for creating amazing web applications. In the next blog post, we will delve into the core concepts of Angular, starting with Components.