Getting Started

• ✔️
  Generate an Angular application

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

• ✔️
  Run the application

  Serve the application locally and see the default boilerplate page.

• ✔️
  Understand hot reload

  Understand how hot reload works in Angular applications.

Project creation

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:

   npx -p @angular/cli@latest ng new angular-introduction-course --standalone=false --style=css --ssr=false --skip-tests=true

Tip

The command includes some options to facilitate the learning process. Find more about the options in the 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 practical-course folder and click on the Select Folder button.

Running the application

Angular CLI provides a command to serve the application locally.

🎓 Instructions

// TODO use hmr to avoid list being reset on hot reloading

1. Open a terminal in Visual Studio Code.

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 boilerplate page:

   

Hot reload

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

🎓 Instructions

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

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

   app.component.html

   <header>
       <h1>Angular Practical course</h1>
   </header>

3. Go back to your browser to see the following page: