Theory
React was a library; Angular is the whole workshop
You built FestConnect's front-end in React, then assembled extra tools around it for routing, forms, and data-fetching, because React is a LIBRARY: it does the UI and leaves the rest to you.
Angular takes the opposite approach: it is a full FRAMEWORK that gives you EVERYTHING, routing, forms, HTTP, dependency injection, in one opinionated package, written in TypeScript. This unit rebuilds FestConnect in Angular so you can compare the two industry leaders. It starts with the big ideas: TypeScript, the component architecture, and the services-and-dependency-injection system that is Angular's signature.
Theory
Framework vs library, and TypeScript
Angular is a framework, React is a library, and the difference is real:
- a library (React) is code YOU call: you stay in control and add pieces
- a framework (Angular) provides the whole STRUCTURE and calls YOUR code: more provided, more conventions to follow
Angular is written in and uses TypeScript: JavaScript PLUS static types, classes, interfaces and decorators, compiled to JavaScript. Types catch errors at COMPILE time (a misspelt property, a wrong argument) rather than at run time, the same safety you valued in Java and C#. If you liked static typing there, TypeScript brings it to the web.
Practical
A component and a service (Angular's shape)
// A SERVICE: reusable logic/data, not tied to any view
@Injectable({ providedIn: 'root' })
export class EventService {
getEvents(): string[] {
return ['Garba Night', 'Coding Contest'];
}
}
// A COMPONENT: a class + template, receives the service via DI
@Component({
selector: 'app-events',
template: '<h2>{{ title }}</h2>'
})
export class EventsComponent {
title = 'FestConnect Events';
// Dependency Injection: Angular SUPPLIES the service here.
// The component does NOT do: new EventService()
constructor(private eventService: EventService) {}
}
Theory
Components, modules, services, DI
Angular organises an app with 4 building blocks:
- Components: the UI pieces, each a TypeScript CLASS with an HTML TEMPLATE and CSS: an app is a tree of them (like React components)
- Modules (NgModule): containers grouping related components and services; the root
AppModulebootstraps the app - Services: reusable classes holding logic or data (fetching events), not tied to any view
- Dependency Injection (DI): Angular CREATES a service and SUPPLIES it to any component that asks (via the constructor), instead of the component building it itself
DI is the signature idea: the component DECLARES what it needs (constructor(private eventService: EventService)) and Angular provides it. This makes services reusable and code testable.
Quiz
What does dependency injection (DI) mean in Angular?
- A component creates its own services with 'new' whenever it needs them
- Angular creates and SUPPLIES a service to a component that declares it (usually in the constructor), instead of the component creating it itself
- Services are copied into every component's code
- DI is Angular's name for its CSS system
Show the answer
Angular creates and SUPPLIES a service to a component that declares it (usually in the constructor), instead of the component creating it itself
Dependency injection means Angular is responsible for CREATING a service and SUPPLYING (injecting) it into any component or other service that DECLARES it needs one, typically as a constructor parameter, rather than the component doing new EventService() itself. This inversion (you declare the dependency, the framework provides it) makes services reusable (one shared instance), swappable, and easy to test (inject a fake in tests). Option A describes the manual approach DI REPLACES. Option C misunderstands it (services are shared, not copied). Option D is unrelated. The essence: ask for what you need in the constructor; Angular hands it to you.
Think first
Why not just 'new EventService()'?
A component could simply write eventService = new EventService() instead of using DI. What does dependency injection buy that the 'new' approach loses? Then tap.
Show the answer
Three things. (1) Sharing: DI gives every component the SAME single instance of the service (a singleton), so shared data/state is consistent; new EventService() would create a separate copy per component. (2) Testability: with DI, a test can INJECT a fake EventService (returning canned data) without touching the component's code; with new, the real service is hard-wired and cannot be swapped. (3) Decoupling and flexibility: the component depends on the service's INTERFACE, not on how to build it, so you can change the service's construction (add config, swap implementations) in one place. The cost of new is hidden dependencies, duplication, and untestable code. DI is a core reason frameworks like Angular are maintainable at scale. Declare, do not construct.
Watch out
Angular concept traps
Confusing framework and library: Angular is a full framework (provides structure); React is a UI library (you assemble around it).
Thinking TypeScript is a different language: it is JavaScript plus static types, compiled to JS.
Bypassing DI with new: use constructor injection so services are shared and testable.
Module vs component confusion: a component is a UI piece; a module (NgModule) groups related components/services.
Forgetting the decorators: @Component, @Injectable, @NgModule are how Angular knows each class's role.
Theory
Concepts down; now build one
You have Angular's mental model: a TypeScript framework of components and modules, wired by services and dependency injection. The next lesson gets hands-on, setting up the development environment (Node.js and the Angular CLI), creating and running an Angular project, and adding routing so FestConnect can have multiple navigable pages. From architecture to a running app.
Summary
Key takeaways
- Angular is a full FRAMEWORK (provides the whole structure) written in TypeScript; React is a UI library you assemble around.
- TypeScript is JavaScript plus static types, classes, interfaces and decorators, compiled to JavaScript.
- Component-based architecture: an app is a tree of components (a TS class + HTML template + CSS).
- Modules (NgModule) group related components and services; the root AppModule bootstraps the app.
- Services are reusable logic/data classes, not tied to a view.
- Dependency injection: Angular creates and supplies a service to a component that declares it (in the constructor), enabling sharing and testability.
- Memory hook: framework not library, TypeScript for types, declare dependencies and let Angular inject them.