Routing and Navigation: setting up development environment, installing Node.js and Angular CLI, creating and running Angular projects, project structure and Angular workspace

📖 Theory

From concept to a running project

You understand Angular's architecture; now you need a project to build in. Unlike opening an HTML file, Angular projects are SCAFFOLDED and SERVED by a command-line tool.

And FestConnect needs multiple PAGES, an events list, a registration form, without full page reloads. Angular apps are single-page applications (SPAs): one page whose content swaps as you navigate, handled by Angular's Router. This lesson covers getting a project running with the Angular CLI, understanding its structure, and adding routing so FestConnect can navigate between views.

🪜 Follow along

Setting up and running an Angular project

1. Install Node.js Node provides npm (the package manager). Angular's tooling runs on Node, the same Node from BCA405-01.
2. Install the Angular CLI npm install -g @angular/cli installs the command-line tool that scaffolds and manages Angular projects.
3. Create a project: ng new festconnect The CLI generates the whole project structure, config, and dependencies.
4. Run it: ng serve Starts the dev server (usually http://localhost:4200) with live reload: edit, save, see it update.
5. Generate parts: ng generate component events The CLI scaffolds a component's files (class, template, CSS) and registers it, saving boilerplate.

📖 Theory

The project structure

An Angular workspace has a predictable layout, and knowing it saves hours:

• src/app/: your application code lives here
• app.component.* : the root component (its class, HTML template, CSS)
• app.module.ts: the root module that bootstraps the app (older style; newer Angular can use standalone components)
• angular.json: configures the workspace and build
• package.json: lists dependencies (installed via npm)

The CLI created all of this. You mostly work inside src/app, adding components and services with ng generate. The structure is CONVENTION: every Angular project looks similar, which is a benefit of a framework, any Angular developer can find their way around yours.

⌨️ Practical

Defining routes (URL to component)

// app.routes.ts: map URL paths to components
import { Routes } from '@angular/router';
import { EventsComponent } from './events.component';
import { RegisterComponent } from './register.component';

export const routes: Routes = [
  { path: '',        component: EventsComponent },   // home
  { path: 'events',  component: EventsComponent },
  { path: 'register', component: RegisterComponent },
  // { path: '**', component: NotFoundComponent }   // wildcard: 404
];
// A visit to /register renders RegisterComponent, with NO page reload.

📖 Theory

Router-outlet and routerLink

Two template pieces make routing work:

• `<router-outlet></router-outlet>`: the placeholder where the matched component RENDERS. When the URL is /register, the RegisterComponent appears here
• `routerLink`: how you NAVIGATE. <a routerLink="/events">Events</a> switches the view WITHOUT reloading the page

The crucial contrast: use routerLink, NOT href. A plain href="/events" triggers a full BROWSER page reload (leaving the SPA and re-downloading everything), destroying the app's state and speed. routerLink navigates within the single-page app, swapping only the outlet's content. This SPA navigation, instant view changes with no reload, is exactly what made FestConnect feel like an app in earlier units.

🧩 Quiz

In an Angular single-page app, why use routerLink instead of a normal href to navigate between views?

1. routerLink is shorter to type
2. routerLink navigates within the SPA (swapping the router-outlet content, no reload); href triggers a full page reload that leaves the app and loses state
3. href does not work in Angular at all
4. There is no difference

💭 Think first

What makes it a 'single-page' app?

FestConnect Angular has /events, /register and more, yet it is called a SINGLE-page application. How can multiple routes be one page? Then tap.

⚠️ Watch out

Setup and routing traps

href instead of routerLink: causes full reloads and loses SPA benefits; use routerLink inside the app.

Forgetting router-outlet: routes have nowhere to render without <router-outlet> in the template.

No wildcard route: without a { path: '**' } route, unknown URLs have no handler; add a 404 component.

Editing generated config blindly: angular.json and module files have structure; use ng generate rather than hand-wiring where possible.

Wrong Node/CLI version: mismatched versions cause setup errors; follow the CLI's guidance.

📖 Theory

App runs and navigates; now its parts

FestConnect Angular is now a running, navigable single-page app. The next lesson digs into the COMPONENT itself, how to create components and, importantly, their LIFECYCLE HOOKS: the methods Angular calls at key moments (like ngOnInit when a component is ready), where you put initialization such as fetching events. From the app shell to the living component.

✅ Summary

Key takeaways

• The Angular CLI scaffolds and runs projects: ng new (create), ng serve (dev server at localhost:4200), ng generate (scaffold parts).
• Setup: install Node.js (for npm), then the Angular CLI globally.
• Project structure: src/app holds the app; app.component.*, app.module.ts, angular.json, package.json.
• Angular apps are single-page applications (SPAs): the Router maps a URL path to a component with no full reload.
• Routes: { path: 'events', component: EventsComponent }; <router-outlet> renders the matched component.
• Navigate with routerLink (SPA, no reload), NOT href (full page reload that loses state).
• Memory hook: CLI scaffolds, Router maps URL to component, routerLink not href.