Getting Started!

Chapter Objectives

• ✔️
  Generate an Angular application

  Learn how to use the Angular CLI to generate an Angular application.

• ✔️
  Run the application

  Launch the application locally and view the default base page.

• ✔️
  Understand hot reloading

  Understand how hot reloading works in Angular applications.

Create the project

Angular provides a Command Line Interface (CLI) to generate a new Angular application, manage the project, and run the application locally.

🎓 Instructions

1. Open a terminal and run the following command to create an Angular application:

   npm create @angular/cli@17.0.0 angular-introduction-course --standalone=false --style=css --ssr=false --skip-tests=true

Tip

The command includes some options to facilitate the learning process. Learn more about the options in Angular CLI Options.

Open the project

🎓 Instructions

1. Open Visual Studio Code. 2. Click on the File menu and select Open Folder. 3. Navigate to the angular-introduction-course folder and click the Select Folder button.

Run the application

The Angular CLI provides a command to launch the application locally.

🎓 Instructions

1. Open Visual Studio Code’s terminal.

2. Type the following command to start the application:

   ng serve

3. Open your browser and navigate to http://localhost:4200.

4. You should see the following default base page:

   

Hot Reloading

Hot reloading is a feature that allows you to see the changes you make to your code without having to manually refresh the page.

🎓 Instructions

1. Open the src/app/app.component.html file.

2. Replace the entire content of the file with the following code:

   app.component.html

   <header>
       <h1>Angular Legacy course</h1>
   </header>

3. Return to your browser to see the following page: