5. Creating and Running the First Angular Application

This lesson walks through using the Angular CLI to generate and serve a new project.

1. Creating a New Project

Use the ng new command, followed by your project name. We'll name ours angular-course-app.

bash ng new angular-course-app

The CLI will ask you two questions:

1. Would you like to add Angular routing? (Answer: Yes, we will cover this soon)
2. Which stylesheet format would you like to use? (Choose CSS for simplicity)

The CLI will create the project folder, set up all necessary files, install npm dependencies, and configure the project.

2. Navigating and Running the Application

Move into the newly created directory:

bash cd angular-course-app

To compile the application and launch the development server, use ng serve.

bash ng serve --open

• ng serve: Compiles the application and watches for changes.
• --open (-o): Automatically opens the application in your default browser (usually at http://localhost:4200/).

3. Making a Simple Change

Open the project in your code editor. Navigate to src/app/app.component.ts and change the title property:

typescript // app.component.ts export class AppComponent { title = 'My First Angular App!'; // Change this line }

Open src/app/app.component.html and modify the template to display your new title:

html

{{ title }}

Application successfully started!

Save the files. The ng serve command will automatically recompile the changes, and your browser will refresh (Hot Module Replacement), showing the updated title.