Theory
The front end of the full stack
This subject builds one app end to end: FestConnect Full Stack, with an Angular front end, an Express/Node backend, a MongoDB database, and Firebase for auth and hosting. We start where the user actually looks: the front end, built with Angular.
You met Angular in Sem 5, so this is a recap that goes deeper. This lesson re-establishes Angular's three core building blocks, components, services, and routing, and the modern way to wire them together in Angular 17 using standalone components. Getting this foundation crisp makes the rest of the front-end unit straightforward.
Theory
Components, services, routing
Angular is a TypeScript framework for building single-page applications (SPAs), apps that load once and update the view without full page reloads. Three concepts do most of the work.
A component is a reusable UI piece: a TypeScript class paired with an HTML template and styles (for example, an EventCard). Services hold shared logic and data (like an EventService that fetches events), and Angular's dependency injection hands a service to any component that asks for it. Routing maps URL paths to components, so /events shows the events page, giving navigation without leaving the single page. Components for the view, services for the logic, routing for navigation.
Practical
A standalone Angular 17 component
import { Component } from '@angular/core';
@Component({
selector: 'app-event-card',
standalone: true, // Angular 17: no NgModule needed
template: `<div class="card">{{ title }}</div>`,
})
export class EventCardComponent {
title = 'Robotics Workshop';
}
// A service holds shared logic, injectable anywhere:
// @Injectable({ providedIn: 'root' })
// export class EventService { getEvents() { /* ... */ } }Formula
Angular 17: standalone components
The big modern change is standalone components. Older Angular grouped components into NgModules; Angular 17 favours marking a component standalone: true, so it declares its own dependencies and needs no module. This makes projects simpler and easier to reason about.
The app is started with bootstrapApplication(AppComponent, ...), and features like routing are added through providers (for example provideRouter(routes)) instead of module imports. Fewer moving parts, clearer structure: standalone is the direction Angular is heading, and what you will use throughout FestConnect.
Practical
Scaffolding a scalable project with the CLI
# The Angular CLI creates and manages the project structure
npm install -g @angular/cli
ng new festconnect # creates a new Angular project
cd festconnect
ng generate component event-card # scaffolds a component
ng serve # run it locally at http://localhost:4200
# The CLI gives a sensible folder structure: src/app for your code,
# with components and services organised into feature folders as it grows.Quiz
In Angular 17, what is the main change in how components are organised compared with older Angular?
- Components are written in plain HTML with no TypeScript
- Components can be standalone (standalone: true), declaring their own dependencies without needing an NgModule
- Routing is no longer possible
- Services have been removed from the framework
Show the answer
Components can be standalone (standalone: true), declaring their own dependencies without needing an NgModule
Angular 17 favours standalone components: a component marked standalone: true declares its own dependencies and does not need to be registered in an NgModule, simplifying the structure. Option A is wrong: Angular components are still TypeScript classes with an HTML template; they are not plain HTML. Option C is wrong: routing very much remains, it is just configured through providers like provideRouter instead of a routing module. Option D is wrong: services (with dependency injection) are still central to Angular. The key recap point is standalone components replacing the older NgModule-based organisation.
Think first
Why did Angular move toward standalone components?
NgModules worked for years. Why does Angular 17 prefer standalone components instead? Then tap.
Show the answer
Because NgModules added a layer of BOILERPLATE and INDIRECTION that beginners and even experienced developers found confusing, and standalone components remove it. In the older model, every component had to be declared in some NgModule, and to use a component or feature you had to make sure the right things were imported and exported across modules, a common source of frustrating 'component is not a known element' errors and mental overhead that had little to do with the actual UI you were building. Standalone components let each component declare exactly what it needs (its own imports) right there in its own decorator, so there is one less concept to learn and one less place for wiring to go wrong. The result is a flatter, more direct structure: you can look at a single component file and understand its dependencies without hunting through modules. It also makes the framework easier to learn (fewer concepts before you can build something), improves tooling and lazy loading, and aligns Angular with how other modern frameworks work. NgModules still exist for compatibility, but standalone is the recommended default going forward. The theme is simplification, removing ceremony that did not earn its keep, which is exactly why this recap starts you on standalone components for FestConnect. Less wiring, clearer components.
Summary
Key takeaways
- Angular is a TypeScript framework for single-page applications; this subject uses it for FestConnect's front end.
- Three core building blocks: components (reusable UI pieces), services (shared logic/data, injected), and routing (URL paths to components).
- Dependency injection supplies a service to any component that asks for it.
- Angular 17 favours standalone components (standalone: true), which declare their own dependencies with no NgModule.
- The app is bootstrapped with bootstrapApplication and configured through providers (e.g. provideRouter).
- The Angular CLI (ng new, ng generate, ng serve) scaffolds and runs a scalable project structure.
- Memory hook: components + services + routing, wired the modern way with standalone components.