Creating a new Angular project - Visual Walkthrough

Concept Flow - Creating a new Angular project

Open Terminal

↓

Run: npm install -g @angular/cli

↓

Run: ng new project-name

↓

Answer prompts: routing? style?

↓

Angular CLI creates project files

↓

Navigate into project folder

↓

Run: ng serve

↓

Open browser at localhost:4200

↓

See default Angular app running

↓

Project ready for development

This flow shows the steps from opening the terminal to seeing the Angular app running in the browser after creating a new project.

Execution Sample

Angular

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

These commands install Angular CLI globally, create a new project named 'my-app', enter its folder, and start the development server.

Execution Table

Step	Command	Action	Output/Result
1	npm install -g @angular/cli	Install Angular CLI globally	Angular CLI installed
2	ng new my-app	Create new Angular project	Prompts for routing and style; project files created
3	cd my-app	Change directory to project folder	Terminal now inside 'my-app' folder
4	ng serve	Start development server	Compiles project and serves at localhost:4200
5	Open browser at localhost:4200	View running app	Default Angular welcome page displayed
6	-	Project ready for development	You can now edit files and see live updates

💡 After step 5, the Angular app runs in the browser, so the project creation and setup is complete.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
Angular CLI	Not installed	Installed globally	Available to create projects	Available inside project folder	Running development server	Serving app at localhost:4200
Project folder	Does not exist	Does not exist	'my-app' folder created	Inside 'my-app' folder	Inside 'my-app' folder	Inside 'my-app' folder
Development server	Not running	Not running	Not running	Not running	Running	Running

Key Moments - 3 Insights

Why do I need to install Angular CLI globally before creating a project?

Angular CLI is the tool that creates and manages Angular projects. Installing it globally (step 1) makes the 'ng' command available anywhere in your terminal, so you can run 'ng new' to create projects (step 2).

What happens when I run 'ng new my-app'?

The CLI asks if you want routing and which style format to use, then creates all necessary files and folders for your Angular project (step 2 in execution_table).

How do I see my Angular app running after creation?

After navigating into the project folder (step 3), running 'ng serve' (step 4) starts a local server. Opening localhost:4200 in a browser (step 5) shows the default Angular app.

Visual Quiz - 3 Questions

Look at the execution table, what command installs Angular CLI globally?

A ng new my-app

B npm install -g @angular/cli

C ng serve

D cd my-app

💡 Hint

Check Step 1 in the execution_table for the command that installs Angular CLI.

At which step does the Angular project folder get created?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Output/Result' columns in the execution_table for when the project files are created.

If you skip 'cd my-app' and run 'ng serve' from outside the project folder, what happens?

A An error occurs because no Angular project is found

B A new project is created automatically

C The server starts normally

D The browser opens automatically

💡 Hint

Refer to the variable_tracker showing where the development server runs and the importance of being inside the project folder.

Concept Snapshot

Creating a new Angular project:
1. Install Angular CLI globally: npm install -g @angular/cli
2. Create project: ng new project-name
3. Enter folder: cd project-name
4. Start server: ng serve
5. Open browser at localhost:4200
This sets up a ready-to-use Angular app for development.

Full Transcript

To create a new Angular project, first open your terminal. Install Angular CLI globally using 'npm install -g @angular/cli'. This makes the 'ng' command available. Next, run 'ng new my-app' to create a new project named 'my-app'. The CLI will ask if you want routing and which style format to use. After the project files are created, change directory into the project folder with 'cd my-app'. Then start the development server by running 'ng serve'. Open your browser and go to 'localhost:4200' to see the default Angular app running. Now your project is ready for development.