Angular First App

Learning Objectives

By the end of this lesson, you will be able to:

• Create your first Angular application from scratch.
• Understand how an Angular application starts.
• Explore the project structure generated by Angular CLI.
• Learn the role of the root component.
• Understand the Angular application lifecycle.
• Modify your first Angular page.
• Run the application locally.
• Understand how Angular renders components in the browser.
• Learn enterprise best practices for creating Angular applications.

Introduction

Every software engineer remembers the excitement of building their very first application.

Although it may only display a simple "Hello Angular" message, behind that small application lies a sophisticated framework capable of powering enterprise systems used by millions of users.

When you create your first Angular application, you're not just creating a webpage.

You're building the foundation of a modern web application architecture that includes:

• Components
• Dependency Injection
• Routing
• TypeScript
• Change Detection
• Templates
• Build Optimization
• Live Reload
• Scalable Project Structure

Understanding what happens behind the scenes will help you appreciate why Angular is trusted by organizations like Google, Microsoft, IBM, SAP, Deutsche Bank, and countless enterprise software companies.

A Real-World Story

A global healthcare company wanted to modernize its patient management portal.

Instead of starting with hundreds of pages, the engineering team began with a single Angular application displaying just one welcome screen.

From that tiny starting point, they gradually added:

• Authentication
• Patient Dashboard
• Appointment Scheduling
• Billing
• Medical Reports
• Notifications
• Analytics

Within a year, that "Hello World" application evolved into a platform serving millions of patients.

Every large Angular application begins with a small first app.

Installing Angular CLI

Before creating your first Angular application, make sure Angular CLI is installed on your machine.

Angular CLI is the official command-line tool used to create, run, test, and build Angular applications.

Install it globally using npm:

npm install -g @angular/cli

After installation, verify the CLI version:

ng version

If the command displays Angular CLI, Node.js, npm, and operating system details, your setup is ready.

If ng is not recognized, restart your terminal and confirm that Node.js and npm are installed correctly.

Creating Your First Angular Application

Open your terminal and execute the following command:

ng new first-angular-app

Angular CLI asks a few questions.

For beginners, choose:

• Server-Side Rendering (SSR): No
• Stylesheet Format: CSS

Angular CLI then generates a complete project structure and installs all required dependencies automatically.

After the installation completes, navigate into the project.

cd first-angular-app

Start the development server.

ng serve --open

Your browser automatically opens:

http://localhost:4200

Congratulations!

Your very first Angular application is now running.

Understanding What Angular CLI Created

Many beginners believe Angular only created a few files.

In reality, Angular generated an entire development ecosystem.

first-angular-app/
│
├── src/
│   ├── app/
│   ├── assets/
│   ├── styles.css
│   ├── index.html
│   └── main.ts
│
├── node_modules/
├── package.json
├── angular.json
├── tsconfig.json
└── README.md

Every file has a specific responsibility.

Understanding these files is the first step toward mastering Angular.

Important Files

package.json

Contains:

• Project metadata
• Dependencies
• Build scripts
• Development scripts

Without this file, Angular cannot install or manage packages.

angular.json

This file controls:

• Build configuration
• Assets
• Styles
• Production settings
• Development server

Think of it as the configuration center of your Angular application.

src/

The src folder contains your application source code.

Everything you build lives here.

app/

This is the heart of your application.

It contains:

• Components
• Services
• Business logic
• UI logic

Almost every feature you create in Angular begins inside this folder.

main.ts

This is the application's entry point.

Angular starts executing your application from this file.

How Angular Starts Your Application

Most beginners think Angular magically appears in the browser.

Actually, a sequence of events occurs.

Every Angular application follows this startup process.

The Root Component

Inside the app folder you'll find:

app/
│
├── app.component.ts
├── app.component.html
├── app.component.css
└── app.component.spec.ts

This is your first Angular component.

It represents the root of your application.

Every other component you create later becomes part of this component hierarchy.

Understanding app.component.ts

A simplified component looks like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'first-angular-app';
}

Let's understand each part.

@Component

The @Component decorator tells Angular that this class is a component.

Without it, Angular would treat it as a normal TypeScript class.

selector

selector: 'app-root'

This defines the custom HTML tag used to display the component.

<app-root></app-root>

Whenever Angular encounters this tag, it renders the component.

templateUrl

This points to the HTML template responsible for displaying the user interface.

styleUrls

Contains component-specific CSS.

These styles affect only this component.

class

The TypeScript class stores the component's data and behavior.

Your First Modification

Open:

app.component.html

Replace the default content with:

<h1>Welcome to Angular!</h1>

<h2>This is my first Angular application.</h2>

<p>
I am learning one of the world's most powerful frontend frameworks.
</p>

Save the file.

The browser updates instantly.

No refresh required.

This is Live Reload in action.

How Angular Renders Components

Whenever you save a file:

Unlike traditional websites, Angular updates only what changed.

This makes development significantly faster.

Real-World Architecture

As applications grow, more components are added.

Every Angular application grows like a tree.

The root component sits at the top.

All other components become children.

This architecture promotes:

• Reusability
• Maintainability
• Scalability

Enterprise Example

Consider an online banking application.

The root component loads:

• Header
• Navigation
• Dashboard
• Transactions
• Notifications
• Profile
• Footer

Each section is an independent Angular component.

This allows multiple teams to work simultaneously without conflicts.

Behind the Scenes

When you save app.component.html, Angular performs several operations.

Notice that the browser itself never reloads.

Only the affected UI updates.

Best Practices

• Keep the root component simple.
• Create new features using separate components.
• Avoid placing all application logic inside AppComponent.
• Follow Angular's recommended folder structure.
• Use Angular CLI to generate new components.
• Keep templates clean and readable.
• Separate UI logic from business logic.

Common Mistakes

• Writing all application code inside AppComponent.
• Editing files inside node_modules.
• Ignoring Angular CLI recommendations.
• Creating large components instead of reusable ones.
• Mixing business logic directly into templates.

Common Misconceptions

Advanced interview questions

Summary

Creating your first Angular application is more than displaying a welcome message. It's your introduction to Angular's powerful architecture and development workflow. You've learned how Angular CLI scaffolds a project, how the application starts from main.ts, how the root component is rendered, and how Live Reload accelerates development. This foundation prepares you for the next lessons, where you'll begin exploring the project structure, templates, and components in greater depth, gradually transforming a simple application into a scalable, production-ready Angular solution.