In this section, we will guide you through creating your first Angular application. By the end of this module, you will have a basic understanding of how to set up and run an Angular app.

Before starting, ensure you have:

• Node.js and npm installed on your machine.
• Angular CLI installed globally (npm install -g @angular/cli).

First, open your terminal or command prompt and run the following command to create a new Angular project:

• Explanation:
  • ng new: This command creates a new Angular workspace and an initial Angular app.
  • my-first-app: This is the name of your project. You can choose any name you prefer.

Once the project is created, navigate to the project directory:

To run your application, use the following command:

• Explanation:
  • ng serve: This command builds the application and starts a web server. By default, it runs on http://localhost:4200.

Open your web 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:

• e2e/: End-to-end tests for the application.
• node_modules/: Contains all the npm packages installed for the project.
• src/: The source code of your application.
  • app/: Contains the main application code.
    • app.component.ts: The main component of the application.
    • app.module.ts: The root module of the application.
  • assets/: Contains static assets like images and styles.
  • environments/: Contains environment-specific configurations.
• angular.json: Configuration file for Angular CLI.
• package.json: Lists the npm packages and scripts for the project.
• tsconfig.json: TypeScript configuration file.

Let's make a simple modification to the default app component to understand how Angular components work.

Navigate to src/app/app.component.html and replace its content with:

Save the file and go back to your browser. You should see the updated content:

1. Open src/app/app.component.ts.
2. Change the title property to "My First Angular Application".
3. Update src/app/app.component.html to display the title property using Angular interpolation.

Solution:

1. Open src/app/app.component.ts and modify the title property:

2. Update src/app/app.component.html to use the title property:

• Mistake: Forgetting to save files after making changes.
  • Tip: Always save your files before checking the browser for updates.
• Mistake: Not running ng serve in the project directory.
  • Tip: Ensure you are in the correct directory (my-first-app) before running ng serve.

Congratulations! You have successfully created and modified your first Angular application. You now have a basic understanding of the Angular project structure and how to make simple changes to components. In the next module, we will dive deeper into Angular architecture and explore how different parts of an Angular application work together.