Practical No.
STEP 1: Install [Link] and npm
Step
1. Go to [Link]
2. Download LTS version
3. Install it on the system
Explanation
[Link] allows JavaScript to run outside the browser.
npm (Node Package Manager) comes with [Link].
npm is used to install Angular and other required libraries.
👉 Why this step is important:
Angular works on [Link]. Without [Link] and npm, Angular cannot run.
STEP 2: Check [Link] and npm Installation
Step
Open Command Prompt and type:
node -v
npm -v
Explanation
These commands show the installed versions.
If versions appear, installation is successful.
👉 Concept for students:
We verify installation before moving forward.
STEP 3: Install Visual Studio Code (VS Code)
Step
1. Go to [Link]
2. Download and install VS Code
Explanation
VS Code is a code editor.
It is used to write, edit, and manage Angular files.
It provides an integrated terminal.
👉 Why VS Code:
It combines coding and command execution in one place.
STEP 4: Open a Folder in VS Code
Step
1. Open VS Code
2. Click File → Open Folder
3. Create and select a folder (example: AngularProjects)
Explanation
Angular projects contain many files.
All project files must be stored in one folder.
VS Code treats this folder as the working directory.
👉 Teaching point:
Always open a folder before running Angular commands.
STEP 5: Open Terminal in VS Code
Step
Click:
Terminal → New Terminal
Explanation
The terminal is used to run Angular commands.
VS Code terminal works the same as Command Prompt.
👉 Important:
All Angular commands are executed in the terminal.
STEP 6: Install Angular CLI
Step
Run the command in VS Code terminal:
npm install -g @angular/cli
Explanation
Angular CLI is a command-line tool.
It helps to:
o Create Angular projects
o Run applications
o Generate components
👉 Why global (-g):
So Angular CLI can be used anywhere on the system.
STEP 7: Verify Angular CLI Installation
Step
ng version
Explanation
Displays Angular CLI version.
Confirms successful installation.
STEP 8: Create a New Angular Project
Step
ng new morning-app
Choose:
Routing → Yes
Stylesheet → CSS
Explanation
This command creates a complete Angular project.
Angular CLI automatically generates required files and folders.
👉 Key learning:
Angular CLI saves time by creating project structure automatically.
STEP 9: Navigate to Project Folder
Step
cd morning-app
Explanation
All Angular commands must be run inside the project folder.
Running commands outside will cause errors.
STEP 10: Run Angular Application
Step
ng serve
Open browser and go to:
[Link]
Explanation
ng serve compiles the application.
Starts a development server.
Port number 4200 is the default for Angular.
👉 Important concept:
Angular supports live reload (auto refresh).
STEP 11: Display “Good Morning” Message
Step
Open file:
src/app/[Link]
Write:
<h1>Good Morning</h1>
Save the file.
Explanation
[Link] is the main UI file.
Whatever is written here appears on the web page.
STEP 12: View Output
Step
Check the browser.
Output
Good Morning
Explanation
Browser automatically updates the output.
No manual refresh required.
Important Folder Structure (For Teaching/Exams)
morning-app
├── src
│ └── app
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── [Link]
└── [Link]