Once you install Node.js on your computer, you can verify it by opening the command prompt and typing node -v. If Node.js is installed successfully then it will display the version of the Node.js installed on your machine, as shown below.

Install Node.js on Mac/Linux

Visit Node.js official web site https://nodejs.org/en/download page. Click on the appropriate installer for Mac (.pkg or .tar.gz) or Linux to download the Node.js installer.

Once downloaded, click on the installer to start the Node.js installation wizard. Click on Continue and follow the steps. After successful installation, it will display summary of installation about the location where it installed Node.js and NPM.

After installation, verify the Node.js installation using terminal window and enter the following command. It will display the version number of Node.js installed on your Mac.

$ node -v

Student Activity Create Server

Create your project folder on your pc

Create server.js in your IDE or notepad++

Step 1 - Import Required Module

We use the require directive to load the http module and store the returned HTTP instance into an http variable as follows −

Step 2 - Create Server

We use the created http instance and call http.createServer() method to create a server instance and then we bind it at port 8080 using the listen method associated with the server instance. Pass it a function with parameters request and response. Write the sample implementation to always return "Hello World".

var http = require('http');

//create a server object:

res.write('Hello World!'); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');

Save to your project folder. Go to folder and open cmd window ( Shift and tight click on the folder and select cmd window ) run the app

node server.js ( should respond with the console message )

and then navigate to localhost:8080

View screen cast of creating a local web server click here

Extension: Extend the web server to check the URL path and serve a response with an appropriate message to the browser

var http = require('http'); // Import Node.js core module

var server = http.createServer(function (req, res) { //create web server

if (req.url == '/') { //check the URL of the current request

// set response header

res.writeHead(200, { 'Content-Type': 'text/html' });

// set response content

res.write('<html><body>This is home Page.</body></html>');

res.end();

}

else if (req.url == "/student") {

res.writeHead(200, { 'Content-Type': 'text/html' });

res.write('<html><body>This is student Page.</body></html>');

res.end();

}

else if (req.url == "/admin") {

res.writeHead(200, { 'Content-Type': 'text/html' });

res.write('<html><body>This is admin Page.</body></html>');

res.end();

}

else

res.end('Invalid Request!');

});

server.listen(5000); //6 - listen for any incoming requests

console.log('Node.js web server at port 5000 is running..')

Student Activity Send Email

The Nodemailer module makes it easy to send emails from your computer.

The Nodemailer module can be downloaded and installed using npm:

d:\Project IB>npm install nodemailer
npm WARN saveError ENOENT: no such file or directory, open 'd:\Project IB\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'd:\Project IB\package.json'
npm WARN Project IB No description
npm WARN Project IB No repository field.
npm WARN Project IB No README data
npm WARN Project IB No license field.

+ nodemailer@6.1.1
added 1 package from 1 contributor and audited 1 package in 2.87s
found 0 vulnerabilities

Now you can send easily send emails! If using gmail you will most likely need to allow access for less secure apps.

What is Typescript

TypeScript is an open-source object-oriented language developed and maintained by Microsoft, licensed under Apache 2 license. It is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript was developed under Anders Hejlsberg, who also led the creation of the C# language. TypeScript was first released in October 2012.

A TypeScript code is written in a file with .ts extension and then compiled into JavaScript using the TypeScript compiler. A TypeScript file can be written in any code editor. A TypeScript compiler needs to be installed on your platform. Once installed, the command tsc <filename>.ts compiles the TypeScript code into a plain JavaScript file. JavaScript files can then be included in the HTML and run on any browser.

Install TypeScript

Microsoft provides Visual Studio Code with TypeScript support built in. Visual Studio Code is an open source editor available on Windows, MacOS as well as Linux platforms. You can download Visual Studio Code from https://code.visualstudio.com

First Typescript program - Add 2 numbers

Screen Cast Demo of activity

1
Create a TypeScript Project Directory
2
Create file add.ts
3
Open the cmd line prompt from the project Directory ( Shift Right click )
4
Compile tsc add.ts ( check java file created)
5
Run node add.js

function addNumbers(a: number, b: number) { 
 return a + b; 
} 
var sum: number = addNumbers(10,15)
console.log('Sum of the two numbers is: ' +sum);

Typing

Typing makes for more robust less error prone coding if for example we had entered a string or an end user had entered a string the compiler will alert the developer of the problem. Try it by replacing

var sum: number = addNumbers(10,15)

with line

var sum: number = addNumbers(10,'abc')

For Loops Example

Using the example below create a simple loop to print off the numbers 1 to 10

for (let i = 0; i < 3; i++) {

console.log ("Block statement execution no." + i);

}

For Loops Activity

Amend the For Loop program to only print even numbers.

Arrays

Example: Array Methods

var fruits: Array<string> = ['Apple', 'Orange', 'Banana']; 
fruits.sort(); 
console.log(fruits); //output: [ 'Apple', 'Banana', 'Orange' ]
console.log(fruits.pop()); //output: Orange
fruits.push('Papaya'); 

console.log(fruits); //output: ['Apple', 'Banana', 'Papaya']
fruits = fruits.concat(['Fig', 'Mango']); 
console.log(fruits); //output: ['Apple', 'Banana', 'Papaya', 'Fig', 'Mango'] 

console.log(fruits.indexOf('Papaya'));//output: 2

Tracing program execution (Exam Questions)

Q1 Covert pseudo code below into Typescript and run program

K = 0
CL = 0
loop while K < len(S)
if S[K] = "E" then
CL = CL + 1
end if
K = K + 1
end loop
output CL

getting started add loop and conditional tests

let k:number = 0;
let cl:number=0;
let i:number =0 ;
let s: string[] = ['P', 'S','E','U','D','O','C','O','D','E'];
let slen:number = s.length;

Q2 Covert pseudo code below into Typescript and run program / Create Trace Table

Remember to TYPE any variables used

SUM = 0

N=6

loop COUNT

from 1 to (N div 2)

if N mod COUNT = 0 then

SUM = SUM + COUNT

end if

end loop

if SUM = N then output "perfect" else output "not perfect" end if

Making a Single Page App

D:\projects\typescript>npm install -g @angular/cli@7.0.2
C:\Users\This PC\AppData\Roaming\npm\ng -> C:\Users\This PC\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@7.0.2
added 265 packages from 207 contributors in 98.95s

D:\projects\typescript>

Once installed go to a directory of your choice and create your first Angular application using the following command.

D:\projects\SPA>ng new MyAngularClient
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE MyAngularClient/angular.json (3849 bytes)
CREATE MyAngularClient/package.json (1324 bytes)
CREATE MyAngularClient/README.md (1032 bytes)
CREATE MyAngularClient/tsconfig.json (408 bytes)
CREATE MyAngularClient/tslint.json (2837 bytes)
CREATE MyAngularClient/.editorconfig (245 bytes)
CREATE MyAngularClient/.gitignore (503 bytes)
CREATE MyAngularClient/src/favicon.ico (5430 bytes)
CREATE MyAngularClient/src/index.html (302 bytes)
CREATE MyAngularClient/src/main.ts (372 bytes)
CREATE MyAngularClient/src/polyfills.ts (3234 bytes)
CREATE MyAngularClient/src/test.ts (642 bytes)
CREATE MyAngularClient/src/styles.css (80 bytes)
CREATE MyAngularClient/src/browserslist (388 bytes)
CREATE MyAngularClient/src/karma.conf.js (964 bytes)
CREATE MyAngularClient/src/tsconfig.app.json (166 bytes)
CREATE MyAngularClient/src/tsconfig.spec.json (256 bytes)
CREATE MyAngularClient/src/tslint.json (314 bytes)
CREATE MyAngularClient/src/assets/.gitkeep (0 bytes)
CREATE MyAngularClient/src/environments/environment.prod.ts (51 bytes)
CREATE MyAngularClient/src/environments/environment.ts (662 bytes)
CREATE MyAngularClient/src/app/app-routing.module.ts (245 bytes)
CREATE MyAngularClient/src/app/app.module.ts (393 bytes)
CREATE MyAngularClient/src/app/app.component.html (1173 bytes)
CREATE MyAngularClient/src/app/app.component.spec.ts (1122 bytes)
CREATE MyAngularClient/src/app/app.component.ts (219 bytes)
CREATE MyAngularClient/src/app/app.component.css (0 bytes)
CREATE MyAngularClient/e2e/protractor.conf.js (752 bytes)
CREATE MyAngularClient/e2e/tsconfig.e2e.json (213 bytes)
CREATE MyAngularClient/e2e/src/app.e2e-spec.ts (311 bytes)
CREATE MyAngularClient/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated @angular/http@7.0.4: Switch to @angular/common/http - see https://angular.io/guide/http
npm WARN deprecated istanbul@0.4.5: This module is no longer maintained, try this instead:
npm WARN deprecated npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
[ .................] - fetchMetadata: sill pacote range manifest for micromatch@^2.1.5 fetched in 269ms

See Screen cast of install procedure click here Check your folder to see if installed.

Don’t worry if you are confused about the files. All of your work will be in the app folder. It contains these files:

Run the App in your terminal ! > ng serve

PS D:\Angular Project\MyAngularClient> ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-04-24T03:33:10.266Z
Hash: 475f317578c6a082d3e4
Time: 5623ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

Part 2 Adding Stuff and Style

Now let’s do some HTML structuring. We will use Bootstrap classes to create a simple form.

app.component.html

Replace with below... and then go to http://localhost:4200/ ?

<div class="container">
<form>
<div class="form-group">
<h1 class="text-center text-primary">Todo App</h1>
<div class="input-group-prepend">
<input type="text" class="form-control" placeholder="Add Todo" name="todo">
<span class="input-group-text">Add</span>
</div>
</div>
</form>
</div>

body{
padding: 0;
margin: 0;


form{
max-width: 25em;
margin: 1em auto;
}

Video Intro to Angular Click Here

https://developer.okta.com/blog/2018/10/30/basic-crud-angular-and-node

https://medium.freecodecamp.org/learn-how-to-create-your-first-angular-app-in-20-min-146201d9b5a7

Before you can get started, you will need to install a few more packages. These will help you to quickly create a nicely designed responsive layout. Navigate to the base directory of the client, MyAngularClient, and type the following command.

D:\projects\SPA\MyAngularClient>npm i @angular/material@7.0.2 @angular/cdk@7.0.2 @angular/animations@7.0.1 @angular/flex-layout@7.0.0-beta.19
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @angular/cdk@7.0.2 requires a peer of @angular/core@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@7.0.2 requires a peer of @angular/common@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/common@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@7.0.2 requires a peer of @angular/core@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/material@7.0.2 requires a peer of @angular/common@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/animations@7.0.1 requires a peer of @angular/core@7.0.1 but none is installed. You must install peer dependencies yourself.

+ @angular/cdk@7.0.2
+ @angular/flex-layout@7.0.0-beta.19
+ @angular/material@7.0.2
+ @angular/animations@7.0.1
added 6 packages from 3 contributors and audited 9 packages in 30.994s
found 0 vulnerabilities

D:\projects\SPA\MyAngularClient>

What is Node.JS

What Can Node.js Do?

Install Node JS

Verify Installation

Install Node.js on Mac/Linux

Student Activity Create Server

Step 1 - Import Required Module

Step 2 - Create Server

Extension: Extend the web server to check the URL path and serve a response with an appropriate message to the browser

Student Activity Send Email

What is Typescript

Install TypeScript

First Typescript program - Add 2 numbers

Typing

For Loops Example

For Loops Activity

Arrays

Tracing program execution (Exam Questions)

Q1 Covert pseudo code below into Typescript and run program

Q2 Covert pseudo code below into Typescript and run program / Create Trace Table

Making a Single Page App

Part 2 Adding Stuff and Style

app.component.html​

app.component.html