Practice

This project was generated using Angular CLI version 19.2.10.

It has been modified for demonstration of Practice Activies for Frontend Framworks. Joanne Hoar, May 2025

See https://code.visualstudio.com/docs/nodejs/angular-tutorial

Environment Setup

1. Install official Node.js LTS from website

2. Open command prompt

3. Verify:

node -v
npm -v

4. Install angular CLI with npm

npm install -g @angular/cli

5. Verify:

npm list -g --depth 0 

6. Create a project

ng new practice

If you're not doing git, you can use --skip-git option in project creation.

ng new --skip-git practice

7. Add to GitHub (recommended)

Open the project folder in VS Code:

cd practice
code .

Choose the source control tab select publish branch, authenticate your github account.

Module 1: Activity #1

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Lint

See https://v17.angular.io/cli/lint And https://eslint.org/docs/latest/

ng lint

Try adding this to main.ts then run lint again.

const pi = 3.14

Testing

ng test

Open the file app.component.spec.ts to edit to re-run tests.

Module 1: Activity #2

Photos generated by https://www.recraft.ai/

Generate component for Product

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Edit the component html, css and typescript to make the product look right.

Generate component for Products Home

Generate another component that displays a list of products. In this example, it loads a json value into a variable. Make the product component take input fields.

Generate components for footer and header

Generate two more components for the header and footer. Edit the html and css.

Module 1: Activity #3

Much of this is example is found https://angular.dev/guide/routing/router-tutorial and https://angular.dev/guide/templates/two-way-binding and https://angular.dev/guide/routing/common-router-tasks.

Add a Home component with an endpoint /home

Add navigation buttons

Add the endpoints and routing for the products pages

In this example, uses the products home component with parameter for category.

Two-way Data Binding

Data Binding Between Components

Module 3: Activity #1

Routing Navigation

Module 3: Activity #2

Form validation with validator directives