Getting Started!

Chapter Objective

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

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 install the Angular CLI:

   Admin mode

   You might need to run the command with administrator privileges, depending on your operating system. Either run the command with sudo prefix on Linux or macOS, or open the terminal as an administrator on Windows.

   npm install -g @angular/cli@latest

   Note

   The -g flag installs the Angular CLI globally, allowing you to use the ng command from any directory.

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

   ng new angular-introduction-course --style=tailwind --ssr=false --skip-tests=true

   Note

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

   Angular CLI Options

   .

3. Open your IDE.

4. For Visual Studio Code: Click on the File menu and select Open Folder.
   For Webstorm: Click on the File menu and select Open....

5. Navigate to the angular-introduction-course folder and click the Select Folder button for Visual Studio Code and the Open button for Webstorm.

6. Open your IDE’s terminal.

7. Type the following command to start the application:

   ng serve

   Angular Analytics

   By running a project for the first time, Angular will prompt you to allow to share pseudonymous usage data with the Angular team. You can choose to allow or disallow this.

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

9. You should see the following default base page:

   Welcome to angular-introduction-course!

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.

1. Locate and open the app.html file in the src/app directory.

   src
   └─ app
       └─ app.html

2. Locate the placeholder (which is wrapped in HTML comment tags) in the app.html file and replace the template content with following:

   app.html

   <h1>Welcome to {{title()}}!</h1>

3. In the file app.ts, locate the imports array and remove the RouterOutlet import:

   app.ts

    import { RouterOutlet } from '@angular/router';

   app.ts

   @Component({
     // ...
     imports: [RouterOutlet],
   })
   export class App {
     // ...
   }

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

   Task Manager