Explore

Veerpal Lesson Plan Tuesday FEB 25

Instructions: Create the Angular App using these instructions.

Take several screen shots demonstrating the operation of the complete app.

Zip up your code and email it to me with your Word Document.

Table 1

Table 1

4 remaining classes

Column 2

4 hrs / class

Feb 25

Feb 27

March 4

PROJECT CONSULTATION AND PRESENTATION

March 6

FINAL EXAM

There are no rows in this table

⁠

Febrary 25: Building the Angular App : Project Part 1: Building the Calculator App

Part 2 will connect our Angular App to a back end data store

Create an ANGULAR Npm.js NODE web app to provide the services of a calculator: web page allows entered numbers and an operation + - / * Calculation is done in the backend and roundtriped back to the HMTL page

Let's create a simple Angular web app with a Node.js backend for a calculator. Here's a step-by-step implementation:

First, let's set up the project structure and create the necessary files:

// Project Structure

calculator-app/

├── backend/

│ ├── package.json

│ ├── server.js

├── frontend/

│ ├── src/

│ │ ├── app/

│ │ │ ├── app.component.html

│ │ │ ├── app.component.ts

│ │ │ ├── app.component.css

│ │ │ ├── app.module.ts

│ ├── package.json

Backend Implementation (Node.js):

backend/package.json

{

"name": "calculator-backend",

"version": "1.0.0",

"main": "server.js",

"scripts": {

"start": "node server.js"

"dependencies": {

"express": "^4.18.2",

"cors": "^2.8.5"

}

backend/server.js

javascript

WrapCopy

const express = require('express');

const cors = require('cors');

const app = express();

const port = 3000;

app.use(cors());

app.use(express.json());

app.post('/calculate', (req, res) => {

const { num1, num2, operation } = req.body;

let result;

switch(operation) {

case '+':

result = Number(num1) + Number(num2);

break;

case '-':

result = Number(num1) - Number(num2);

break;

case '*':

result = Number(num1) * Number(num2);

break;

case '/':

result = num2 !== 0 ? Number(num1) / Number(num2) : 'Error: Division by zero';

break;

default:

result = 'Invalid operation';

}

res.json({ result });

});

app.listen(port, () => {

console.log(`Server running at http://localhost:${port}`);

});

Frontend Implementation (Angular):

frontend/package.json

json

WrapCopy

{

"name": "calculator-frontend",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build"

"dependencies": {

"@angular/core": "^17.0.0",

"@angular/common": "^17.0.0",

"@angular/compiler": "^17.0.0",

"@angular/platform-browser": "^17.0.0",

"@angular/platform-browser-dynamic": "^17.0.0",

"@angular/forms": "^17.0.0",

"rxjs": "~7.8.0",

"zone.js": "~0.14.0"

}

frontend/src/app/app.module.ts

typescript

WrapCopy

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, HttpClientModule, FormsModule],

bootstrap: [AppComponent]

})

export class AppModule { }

frontend/src/app/app.component.ts

typescript

WrapCopy

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

num1: number = 0;

num2: number = 0;

operation: string = '+';

result: string | number = '';

constructor(private http: HttpClient) {}

calculate() {

const body = {

num1: this.num1,

num2: this.num2,

operation: this.operation

};

this.http.post('http://localhost:3000/calculate', body)

.subscribe({

next: (response: any) => {

this.result = response.result;

error: (error) => {

this.result = 'Error occurred';

console.error(error);

}

});

}

frontend/src/app/app.component.html

html

WrapCopy

<h1>Calculator</h1>

</select>

</div>

<button (click)="calculate()">Calculate</button>

Result: {{result}}

</div>

frontend/src/app/app.component.css

css

WrapCopy

.calculator {

max-width: 400px;

margin: 50px auto;

padding: 20px;

text-align: center;

}

.input-group {

display: flex;

gap: 10px;

margin: 20px 0;

}

input, select {

padding: 8px;

font-size: 16px;

}

button {

padding: 10px 20px;

font-size: 16px;

background-color: #007bff;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

.result {

margin-top: 20px;

font-size: 18px;

}

To run the application:

Backend:

bash

WrapCopy

cd backend

npm install

npm start

Frontend (in a separate terminal):

bash

WrapCopy

cd frontend

npm install

ng serve

This will create a simple calculator application where:

The frontend runs on Angular (default port 4200)

The backend runs on Node.js/Express (port 3000)

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.