Introduction to Angular & CLI

🅰️ Angular Lesson 1 Beginner

Angular is a comprehensive, TypeScript-based development platform and framework for building scalable web applications. Developed by Google, it provides a structured foundation containing dependency injection, routing, forms, and client-side templating out of the box.

1 Angular Architecture Overview

Angular differs from libraries like React by being highly structured and opinionated. It is organized around the following key concepts:

Components: Define views, layout templates, and associated JavaScript controller logic.
Services: Hold application business logic that does not belong in views, sharing state across components.
Modules (NgModule) / Standalone Components: Compile units that group related components, directives, and pipes.
TypeScript: Out-of-the-box static typing, decorators, and modern JavaScript syntax support.

2 Installing the Angular CLI & Creating Projects

The Angular CLI is the official command-line tool for initialization, generating files, building, and deploying Angular apps.

Terminal — Angular CLI Usage

# 1. Install CLI globally
npm install -g @angular/cli

# 2. Initialize a new Angular workspace
ng new my-angular-app

# 3. Navigate into project
cd my-angular-app

# 4. Spin up development server
ng serve --open

The ng serve command automatically compiles the project in memory, starts a local server (defaulting to http://localhost:4200), and watches files for changes, refreshing the browser page on updates.

3 Code Challenge

Challenge: Open your terminal, verify your Angular installation version using ng version, and list the key folder structures created inside a newly initialized workspace directory (like src/app/).