Introduction to Angular - Textnotes

Introduction to Angular

A beginner-friendly introduction to Angular covering its core concepts, architecture, CLI tools, TypeScript basics, and comparison with other popular frameworks like React and Vue. This chapter helps you understand the fundamentals needed to start building powerful Angular applications.

1. What is Angular?

Angular is a TypeScript-based JavaScript framework developed and maintained by Google.

It is used to build dynamic, fast, and scalable single-page applications (SPAs).

Key Features

  1. Component-based UI
  2. Built-in routing
  3. Two-way data binding
  4. Dependency injection
  5. Reactive programming with RxJS
  6. Strong CLI support
  7. Suitable for enterprise-level apps

Where Angular Is Used

  1. Admin dashboards
  2. E-commerce frontends
  3. ERP and CRM systems
  4. Online education platforms
  5. Complex enterprise software

2. Angular vs React vs Vue

FeatureAngularReactVue
TypeFull FrameworkUI LibraryFramework
LanguageTypeScriptJavaScript / TypeScriptJavaScript
Learning CurveMedium–HighMediumEasy
RoutingBuilt-inExternal libraryBuilt-in
ArchitectureMVC + ComponentsComponentsComponents
State ManagementRxJS, NgRxRedux, Context APIVuex, Pinia
Best ForLarge enterprise appsUI-heavy appsLightweight apps

Summary

  1. Angular is best for enterprise-scale and structured applications.
  2. React is best for highly customized UI development.
  3. Vue is lightweight and easy for beginners.

3. Angular Architecture Overview

Angular uses a modular and component-driven architecture.

The main building blocks are:

Modules

Contain components, directives, pipes, services, and configurations.

Every Angular app has a root module called AppModule.

Components

The basic UI building blocks containing a template, TypeScript logic, and CSS styling.

Templates

HTML-based views with Angular syntax such as *ngFor, *ngIf and data binding.

Services

Contain shared business logic and reusable functions.

Angular uses dependency injection to manage services.

Directives

Used to change the behavior or structure of DOM elements.

Examples include ngClass, ngModel, and *ngIf.

Pipes

Used to transform or format values in templates.

Examples: date, currency, uppercase.

4. Angular CLI Overview

The Angular CLI is a command-line tool that automates development tasks and follows best practices.

Install CLI


npm install -g @angular/cli

Common CLI Commands

PurposeCommand
Create new projectng new project-name
Run development serverng serve
Generate componentng generate component home
Generate serviceng generate service user
Generate moduleng generate module admin
Build for productionng build --prod

Advantages of Angular CLI

  1. Faster development
  2. Standard project structure
  3. Built-in testing setup
  4. Automatic optimization during build

5. TypeScript Basics (Interfaces, Classes, Types)

Angular is built with TypeScript, so understanding TypeScript fundamentals is important.

Types


let id: number = 1;
let name: string = "Chinmaya";
let active: boolean = true;

Interfaces

Interfaces are used to define object shapes and enforce structure.


interface User {
id: number;
name: string;
}

const user: User = { id: 1, name: "John" };

Classes


class Person {
name: string;

constructor(name: string) {
this.name = name;
}

greet() {
return "Hello " + this.name;
}
}

Access Modifiers


class Test {
public a = 10;
private b = 20;
protected c = 30;
}

Generics


function identity<T>(value: T): T {
return value;
}

6. Node.js & npm Basics

What is Node.js?

Node.js is a JavaScript runtime environment used to run JavaScript outside the browser.

Angular requires Node.js to compile, build, and run its development server.

What is npm?

npm (Node Package Manager) handles Angular packages, libraries, and dependencies.

Useful Commands


node -v
npm -v
npm install <package>
npm uninstall <package>