In this section, we will create our first Angular application. This will help you understand the basic structure of an Angular project and how to run it. By the end of this section, you will have a working Angular application running on your local machine.

Angular CLI (Command Line Interface) is a powerful tool that helps you initialize, develop, scaffold, and maintain Angular applications.

Command to install Angular CLI:

Once Angular CLI is installed, you can create a new Angular project using the ng new command.

Command to create a new Angular project:

Explanation:

• ng new: This command creates a new Angular project.
• my-first-angular-app: This is the name of your project. You can choose any name you like.

After creating the project, navigate to the project directory.

Command to navigate to the project directory:

To run the application, use the ng serve command. This will compile the application and start a development server.

Command to serve the application:

Explanation:

• ng serve: This command compiles the application and starts a development server. By default, the server runs on http://localhost:4200.

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

When you create a new Angular project, several files and directories are generated. Here is a brief overview of the most important ones:

Let's modify the default template to display a custom message.

1. Open src/app/app.component.html.
2. Replace the existing content with the following code:

3. Save the file and refresh the browser. You should see the updated message.

1. Open src/app/app.component.html.
2. Add a new paragraph below the existing content with a custom message.
3. Save the file and verify the changes in the browser.

Solution:

1. Generate a new component using Angular CLI.
2. Modify the new component to display a custom message.
3. Include the new component in the root component template.

Steps:

1. Generate a new component:

   ng generate component my-new-component
   

2. Modify the new component:

   • Open src/app/my-new-component/my-new-component.component.html.
   • Add the following content:

     <p>This is my new component!</p>
     

3. Include the new component in the root component template:

   • Open src/app/app.component.html.
   • Add the following line:

     <app-my-new-component></app-my-new-component>
     

4. Save all files and refresh the browser.

Solution:

In this section, you learned how to:

• Install Angular CLI.
• Create a new Angular project.
• Serve the application and view it in a browser.
• Understand the basic project structure.
• Modify the default template.
• Create and include a new component.

By completing these steps, you now have a basic understanding of how to set up and run an Angular application. In the next module, we will dive deeper into Angular components and learn how to create and manage them effectively.