**Course Title:** Mastering Angular: Building Scalable Web Applications **Section Title:** Introduction to Angular and Development Environment **Topic:** Set up your Angular environment and create a simple Angular application with basic components. (Lab topic) In this lab, we'll guide you through setting up your Angular development environment and creating a simple Angular application with basic components. **Setting up the Angular Development Environment** Before we start creating our application, let's make sure we have the necessary tools and software installed on our machines. 1. **Installing Node.js** If you haven't already, download and install Node.js from the official Node.js website: <https://nodejs.org/en/download/> 2. **Installing Angular CLI** The Angular CLI is a command-line interface tool that helps us create, manage, and build Angular applications. You can install it globally on your machine by running the following command in your terminal: ```bash npm install -g @angular/cli ``` 3. **Verify the Installation** Once installed, verify the installation by running the following command in your terminal: ```bash ng --version ``` This command should print the version of the Angular CLI you just installed. **Creating a New Angular Application** Now that we have our development environment set up, let's create a new Angular application. 1. **Create a New Project** Run the following command in your terminal to create a new Angular application: ```bash ng new my-app ``` Follow the prompts and set the application name, directory name, and routing. For this example, we'll call our application `my-app`. 2. **Navigate to the Project Directory** Once the project is created, navigate to the project directory by running the following command in your terminal: ```bash cd my-app ``` 3. **Start the Application** Start the application by running the following command in your terminal: ```bash ng serve -o ``` This command will start the application in development mode and open it in your default web browser. **Create a Simple Angular Application with Basic Components** Now that our application is set up, let's create a simple Angular application with basic components. **Step 1: Create a Header Component** Create a new header component by running the following command in your terminal: ```bash ng generate component header ``` **Step 2: Create a Footer Component** Create a new footer component by running the following command in your terminal: ```bash ng generate component footer ``` **Step 3: Create a Content Component** Create a new content component by running the following command in your terminal: ```bash ng generate component content ``` **Step 4: Update the App Component** Update the app component to use our new header, footer, and content components. Open the `app.component.html` file and replace the existing code with the following code: ```html <app-header></app-header> <app-content></app-content> <app-footer></app-footer> ``` **Step 5: Update the App Module** Update the app module to import our new components. Open the `app.module.ts` file and add the following code: ```typescript import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component'; import { ContentComponent } from './content/content.component'; @NgModule({ declarations: [ AppComponent, HeaderComponent, FooterComponent, ContentComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` **Step 6: Run the Application** Finally, run the application by executing the following command in your terminal: ```bash ng serve -o ``` This command will start the application in development mode and open it in your default web browser. **Practical Takeaways:** In this lab, we learned how to set up our Angular development environment, create a new Angular application, and create basic components. We also learned how to update the app component to use our new header, footer, and content components. **What's Next:** In the next topic, we'll dive deeper into understanding components: creation and lifecycle. If you have any questions or need further clarification on any of the steps, please leave a comment below.