Introduction

Introduction

Welcome to the Angular 2 Tutorial! Angular is a powerful, full-featured front-end framework built by Google for creating dynamic, single-page applications (SPAs). Despite the name "Angular 2," this tutorial covers the modern Angular framework (versions 2+), which is a complete rewrite of AngularJS.

What Is Angular?

Angular is a component-based framework for building web applications. It provides:

• A structured, opinionated architecture
• Two-way data binding
• Dependency injection
• Routing
• HTTP services
• A powerful CLI for scaffolding and building

Angular vs AngularJS

Feature	AngularJS (1.x)	Angular (2+)
Language	JavaScript	TypeScript
Architecture	MVC (controllers, scopes)	Component-based
Mobile support	Limited	Built-in
Performance	Slower (digest cycle)	Much faster (change detection)
CLI	None official	Angular CLI
Rendering	Browser only	Server-side rendering support

Why Angular?

• Full framework — routing, forms, HTTP, testing all built in
• TypeScript — type safety catches errors at compile time
• Google-backed — long-term support and large ecosystem
• Enterprise-ready — used by Google, Microsoft, Forbes, BMW
• Angular CLI — generates components, services, and builds with one command

What You'll Learn

1. Setting up Angular with the CLI
2. TypeScript fundamentals
3. Components and templates
4. Data binding (property, event, two-way)
5. Custom property and event binding
6. Routing and navigation
7. Directives and pipes
8. Services and dependency injection
9. HTTP and connecting to Firebase

Prerequisites

• Solid understanding of HTML and CSS
• Basic JavaScript knowledge (ES6 features like arrow functions, classes)
• Node.js installed on your machine
• A code editor (VS Code recommended — with the Angular Language Service extension)

The Angular Ecosystem

Angular Application
├── Components      → Building blocks of the UI
├── Templates       → HTML with Angular syntax
├── Services        → Shared logic and data
├── Directives      → Custom HTML behavior
├── Pipes           → Data transformation
├── Routing         → Page navigation
└── HTTP Client     → API communication

Key Takeaways

• Angular is a full-featured, component-based framework by Google
• It uses TypeScript for type safety and better tooling
• Angular (2+) is a complete rewrite of AngularJS — much faster and modern
• The Angular CLI handles project setup, scaffolding, and building
• This series covers everything from setup to connecting with Firebase