**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Introduction to Angular and Development Environment **Topic:** Creating your first Angular application. **Introduction** In this topic, we will guide you through the process of creating your first Angular application. We will cover the essential steps required to set up a basic Angular project, and by the end of this topic, you will have a fully functional Angular application up and running. This hands-on experience will help you grasp the concepts we've discussed so far and lay the foundation for more advanced topics. **Prerequisites** Before we begin, ensure you have the following prerequisites in place: * Node.js (14.x or later) installed on your machine. You can download the latest version from the official Node.js website: <https://nodejs.org/en/download/> * Angular CLI (11.x or later) installed globally on your machine. You can install it using npm by running the following command in your terminal: `npm install -g @angular/cli` * A basic understanding of HTML, CSS, and JavaScript. **Step 1: Creating a new Angular project** To create a new Angular project, navigate to your desired project directory and run the following command in your terminal: ```bash ng new my-first-app ``` Replace `my-first-app` with your desired application name. This command will prompt you with a few questions: * `Would you like to add Angular routing? (y/n)`: Type `y` and press Enter to add routing to your application. * `Which stylesheet format would you like to use?`: Choose the default option `CSS`. Once you've answered these questions, the Angular CLI will create a new directory with the basic structure for your application. **Step 2: Exploring the project structure** Open the newly created project directory in your preferred code editor. You should see the following structure: ```bash my-first-app/ e2e/ node_modules/ src/ app/ app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts assets/ environments/ index.html main.ts styles.css angular.json package.json tsconfig.json ``` Here's a brief explanation of the key files and directories: * `src/`: This directory contains the source code for your application. * `app/`: This directory contains the components, services, and modules for your application. * `app.component.*`: These files define the application component, which is the root component of your application. * `app.module.ts`: This file defines the application module, which is the root module of your application. **Step 3: Understanding the application component** Open the `app.component.ts` file and explore its contents: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-first-app'; } ``` This component defines a simple class with a `title` property. The decorator `@Component` provides metadata about the component, including the selector, template, and styles. **Step 4: Running the application** To run the application, navigate to the project directory and execute the following command: ```bash ng serve ``` This command will start the development server, and you can access your application by navigating to `http://localhost:4200` in your web browser. **Conclusion** Congratulations! You have successfully created your first Angular application. In this topic, we covered the essential steps required to set up a basic Angular project, and you now have a fully functional application up and running. This hands-on experience will help you grasp the concepts we've discussed so far and lay the foundation for more advanced topics. **What's next?** In the next topic, we will delve into the world of components and templates. We will explore how to create components, understand their lifecycle, and learn how to use templates to define the view. **Leave a comment or ask for help** If you have any questions or need help with this topic, feel free to leave a comment below. We're here to assist you and provide guidance. **Recommended reading** * Angular CLI documentation: <https://angular.io/cli> * Angular Component documentation: <https://angular.io/api/core/Component> * Angular Template documentation: <https://angular.io/guide/template-syntax> **Practice exercise** Create a new Angular project using the Angular CLI, and experiment with the different options available. Try adding routing and changing the stylesheet format to see how it affects the project structure.