How to Set Up Angular Development Environment for Web Apps

In the previous lesson, we explored what Angular is and why it’s a powerful framework for building web apps. We learned about its features, such as two-way data binding and modular design, which make it a top choice for developers. Now, it’s time to dive into the practical side of things. In this lesson, we’ll walk you through setting up your development environment, which is the first step to start building Angular apps.

Setting up the environment might seem daunting at first, but I’ve faced this process many times, and I can assure you it’s straightforward once you know the steps. By the end of this tutorial, you’ll have Node.js, Angular CLI, and VS Code installed and ready to use. Let’s get started!

Install Node.js

Before you can work with Angular, you need Node.js, which is a runtime environment that lets you run JavaScript on your machine. Node.js also comes with npm (Node Package Manager), which is essential for installing Angular CLI and other tools.

To install Node.js, visit the official Node.js website and download the latest stable version. I recommend choosing the LTS (Long Term Support) version, which is more stable and widely used. Once the download is complete, run the installer and follow the prompts.

After installation, open your terminal or command prompt and type:

node -v  

This command checks the installed Node.js version. If you see a version number, you’re good to go. Next, verify npm by typing:

npm -v  

These commands ensure that both Node.js and npm are installed correctly.

Install Angular CLI

Angular CLI (Command Line Interface) is a powerful tool that simplifies creating and managing Angular projects. It automates tasks like generating components, services, and modules, saving you time and effort.

To install Angular CLI, open your terminal and run:

npm install -g @angular/cli  

The -g flag installs Angular CLI globally, so you can use it from any directory. Once the installation is complete, verify it by typing:

ng version

This command displays the installed Angular CLI version and other details. If you see this information, Angular CLI is ready to use.

Install VS Code

Visual Studio Code (VS Code) is a lightweight yet powerful code editor that works seamlessly with Angular. It offers features like IntelliSense, debugging, and extensions that enhance your coding experience.

To install VS Code, visit the official VS Code website and download the installer for your operating system. Run the installer and follow the steps. Once installed, open VS Code and explore its interface.

To make your Angular development even smoother, install the Angular Language Service extension in VS Code. This extension provides features like autocompletion and error checking, which are incredibly helpful when writing Angular code.

Create Your First Angular Project

Now that you have Node.js, Angular CLI, and VS Code installed, it’s time to create your first Angular project. Open your terminal and navigate to the folder where you want to create the project. Then, run:

ng new my-first-app  

Replace my-first-app with your desired project name. Angular CLI will ask you a few questions, such as whether to include Angular routing and which stylesheet format to use. For now, you can stick with the default options.

Once the project is created, navigate into the project folder:

cd my-first-app  

Then, start the development server by running:

ng serve  

This command compiles your app and starts a local server. Open your browser and go to http://localhost:4200/ to see your Angular app in action.

Explore the Folder Structure

Angular CLI generates a well-organized folder structure for your project. Let’s take a quick look at the key folders and files:

• src/: This folder contains your app’s source code, including components, styles, and assets.

• app/: This is where your app’s main components and modules reside.

• angular.json: This file contains configuration settings for your Angular project.

• package.json: This file lists all the dependencies and scripts for your project.

Understanding this structure is crucial as you start building more complex apps. For now, focus on the app/ folder, which is where you’ll spend most of your time.

Conclusion

In this tutorial, we walked through the steps to set up your Angular development environment. We installed Node.js, Angular CLI, and VS Code, and created your first Angular project. By now, you should have a working Angular app running on your local machine.

Setting up the environment is just the beginning. In the next lesson, we’ll dive into understanding Angular components, which are the building blocks of any Angular app. You’ll learn how to create and use components to build dynamic user interfaces.

If you missed the previous lesson, I recommend revisiting it to solidify your understanding of what Angular is and why it’s so powerful. Stay tuned for the next tutorial, where we’ll take your Angular skills to the next level!