? Hello World & Project Structure

? Quick Overview

Once you have installed the Angular CLI, you can quickly spin up a new Angular project with a single command. In this topic, you will:

Generate a new Angular project using the CLI.
Run the development server and see the default Angular page.
Modify the main app component to show a simple Hello World message.
Understand the basic project structure created by Angular CLI.

Think of this as your first “hello” to Angular — a simple starting point before building real-world apps.

? Key Concepts

Angular CLI (ng) – Command-line tool to create, build, and serve Angular apps.
ng new <project-name> – Creates a new Angular project with a ready-to-use structure.
ng serve – Starts a local development server (default: http://localhost:4200).
app.component.ts – The root component where you can display your first Hello World message.
Project Structure – Angular CLI generates folders like src/, src/app/, and files like angular.json, package.json, etc.

⚙️ Syntax & Theory

When you run ng new hello-world-app, Angular CLI generates a standard folder structure:

src/ → Contains all the source code for your Angular app.
src/app/ → Main application code (components, services, modules).
src/assets/ → Stores images, styles, and other static resources.
src/environments/ → Environment-specific configurations (dev, prod, etc.).
angular.json → Workspace and project configuration file.
package.json → Lists dependencies and handy npm scripts.

The root component AppComponent (in src/app/app.component.ts) is what you see first in the browser. By changing its template, you control what appears on the page.

? Code Examples

1️⃣ Create a New Angular Project

Run this command in your terminal to create a new project named hello-world-app:

? View Code Example

// Create a new Angular project named "hello-world-app"
ng new hello-world-app

This will create a new Angular project with all necessary configurations.

2️⃣ Run the Application

Navigate into the project directory and start the development server:

? View Code Example

// Go into the project folder and start the dev server
cd hello-world-app
ng serve

Open your browser and go to http://localhost:4200. You should see the default Angular welcome page.

3️⃣ Modify the App Component (Hello World)

Edit the main component file src/app/app.component.ts to show a custom Hello World message:

? View Code Example

// src/app/app.component.ts — simple Hello World component
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<h1>Hello World from Angular!</h1>`
})
export class AppComponent {
title = 'hello-world-app';
}

4️⃣ Project Structure Snapshot

A simplified view of the key files and folders created by Angular CLI:

? View Code Example

// Important parts of the generated Angular project
hello-world-app/
  src/
    app/
      app.component.ts
      app.component.html
      app.module.ts
    assets/
    environments/
  angular.json
  package.json

? Live Output & Explanation

What You’ll See in the Browser

After running ng serve and opening http://localhost:4200, you will first see the default Angular welcome page. Once you replace the template in app.component.ts with:

<h1>Hello World from Angular!</h1>

the browser will refresh (or you can reload manually), and you will see a clean heading:

Hello World from Angular! rendered in large bold text.
The message comes directly from your AppComponent template.

This confirms that your Angular setup is working and that you can now control what appears on the page through components.

? Tips & Best Practices

Use ng serve -o to automatically open the app in your browser after starting the dev server.
Keep src/app/ organized by grouping related components and services into folders.
Update app.component.html if you prefer separating HTML from TypeScript logic.
Commit your fresh project to a Git repository before making big changes — easy to roll back if needed.
Use meaningful project names like todo-app or blog-app for real projects.

? Try It Yourself / Practice Tasks

Create a new project named my-first-app and run it locally.
Change the default Angular welcome page to display Hello Angular Learner!.
Explore the src/app/ folder and identify the role of app.module.ts.
Add another line under your Hello World heading, such as Welcome to my first Angular app..
Try changing the selector in AppComponent and see how it affects where the component is rendered.