Angular Labs
COOKIES

Getting Started!

Git diff Branch
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 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.

    Terminal window
    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:

    Terminal window
    ng new angular-introduction-course --style=css --ssr=false --skip-tests=true --zoneless=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:

    Terminal window
    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.ts file in the src/app directory.

    Terminal window
    src
    └─ app
    └─ app.ts
  2. Locate the `template property with the current content:

    app.ts
    template: `
    <h1>Welcome to {{title}}!</h1>
    <router-outlet />
    `,
  3. Replace the template content with

    app.ts
    <header>
    <h1>Task Manager</h1>
    </header>
  4. Return to your browser to see the following page:

    Task Manager