Today :  Follow links below

Complete Node Install and Verify

Complete Email Send Activity 

Complete Web Server Activity

Install Type Script using npm

Install Type Script program add 2 numbers

Complete Loops Activity

Complete Tracing Program

What is Node.JS

  • Node.js is an open source server environment
  • Node.js is free
  • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
  • Node.js uses JavaScript on the server
  • What Can Node.js Do?

  • Node.js can generate dynamic page content
  • Node.js can create, open, read, write, delete, and close files on the server
  • Node.js can collect form data
  • Node.js can add, delete, modify data in your database
  • Install Node JS

    Visit Node.js official web site https://nodejs.org. It will automatically detect OS and display download link as per your Operating System.

    Verify Installation

    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><p>This is home Page.</p></body></html>');

       res.end();

    }

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

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

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

       res.end();

    }

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

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

       res.write('<html><body><p>This is admin Page.</p></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.

    var nodemailer = require('nodemailer');

    var transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: 'youremail@gmail.com',
        pass: 'yourpassword'
      }
    });

    var mailOptions = {
      from: 'youremail@gmail.com',
      to: 'myfriend@yahoo.com',
      subject: 'Sending Email using Node.js',
      text: 'That was easy!'
    };

    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });


    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. 1
      Create a TypeScript Project Directory
    2. 2
      Create file add.ts
    3. 3
      Open the cmd line prompt  from the project Directory ( Shift Right click ) 
    4. 4
      Compile  tsc add.ts  ( check java file created)
    5. 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

    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>