Getting Started!
- 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
-
Open a terminal and run the following command to install the Angular CLI:
Admin modeYou 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@latestNoteThe
-g
flag installs the Angular CLI globally, allowing you to use theng
command from any directory. -
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=trueNoteThe command includes some options to facilitate the learning process. Learn more about the options in Angular CLI Options.
-
Open your IDE.
-
For Visual Studio Code: Click on the
File
menu and selectOpen Folder
.
For Webstorm: Click on theFile
menu and selectOpen...
. -
Navigate to the
angular-introduction-course
folder and click theSelect Folder
button for Visual Studio Code and theOpen
button for Webstorm. -
Open your IDE’s terminal.
-
Type the following command to start the application:
Terminal window ng serveAngular AnalyticsBy 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.
-
Open your browser and navigate to
http://localhost:4200
. -
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.
-
Locate and open the
app.ts
file in thesrc/app
directory.Terminal window src└─ app└─ app.ts -
Locate the `template property with the current content:
app.ts template: `<h1>Welcome to {{title}}!</h1><router-outlet />`, -
Replace the template content with
app.ts <header><h1>Task Manager</h1></header> -
Return to your browser to see the following page:
Task Manager