In this section, we will guide you through the process of setting up your development environment for Angular. This includes installing necessary tools and creating a basic Angular project.

Before we start, ensure you have the following installed on your machine:

• Node.js: Angular requires Node.js for its build and development processes.
• npm: Node Package Manager (npm) comes with Node.js and is used to install Angular CLI and other dependencies.

1. Download Node.js:

   • Visit the Node.js official website.
   • Download the LTS (Long Term Support) version for your operating system.

2. Install Node.js:

   • Run the downloaded installer and follow the instructions.
   • Verify the installation by running the following commands in your terminal or command prompt:

     node -v
     npm -v
     

   • You should see the version numbers of Node.js and npm.

Angular CLI (Command Line Interface) is a powerful tool that helps you create, build, and manage Angular applications.

1. Install Angular CLI globally:
   • Open your terminal or command prompt.
   • Run the following command:

     npm install -g @angular/cli
     

   • Verify the installation by running:

     ng version
     

   • You should see the Angular CLI version along with other Angular-related packages.

1. Create a new project:

   • Navigate to the directory where you want to create your project.
   • Run the following command:

     ng new my-first-angular-app
     

   • You will be prompted to choose whether to add Angular routing and which stylesheet format to use (CSS, SCSS, etc.). For now, you can choose the default options.

2. Navigate to the project directory:

   cd my-first-angular-app
   

3. Serve the application:

   • Run the following command to start a development server:

     ng serve
     

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

Here is a brief overview of the key files and directories in your new Angular project:

• src/: Contains the source code of your application.
  • app/: Contains the main application module and component.
  • assets/: Contains static assets like images and styles.
  • environments/: Contains environment-specific configuration files.
• angular.json: Configuration file for Angular CLI.
• package.json: Lists the project dependencies and scripts.
• tsconfig.json: TypeScript configuration file.

1. Create a new Angular project:

   • Follow the steps above to create a new Angular project named my-first-angular-app.

2. Serve the application:

   • Start the development server and open the application in your browser.

3. Explore the project structure:

   • Open the project in your favorite code editor (e.g., Visual Studio Code).
   • Familiarize yourself with the files and directories mentioned above.

• Node.js and npm versions: Ensure you have compatible versions of Node.js and npm. Angular CLI may not work correctly with outdated versions.
• Global installation of Angular CLI: Use the -g flag to install Angular CLI globally. This allows you to use the ng command from any directory.
• Firewall and proxy issues: If you encounter network issues while installing packages, check your firewall and proxy settings.

In this section, you have learned how to set up your development environment for Angular. You installed Node.js, npm, and Angular CLI, created a new Angular project, and served the application. Understanding the project structure will help you navigate and manage your Angular applications effectively.

Next, we will dive into the Angular architecture to understand the core concepts and building blocks of an Angular application.