How to access functionality from various JS files in Node.js

In this post we will take a look on working with different JS files in Node.js. To start with let us assume a scenario that you have several js files and you need to work with these js files and use functionalities from these files in server.js.

In Node a JS file is a module. So to work with one file in another you need to load the module. For example if you want to work with A.js in server.js then you need to load A.js in server.js using require.

image

Let us assume that we have a file or module names Product.js as below.


var product =
{
 productName : "Pen",
 productPrice : 200,
 productStock : false
};

Now let us say we need to export

  • Product price
  • Product name

Export can be done using module.exports. So productName and productPrice will be exported to other modules as productname and productprice.

clip_image002

Here we are not exporting productStock. Product.js can be modified with export as below,

var product =
{
 productName : "Pen",
 productPrice : 200,
 productStock : false
};

module.exports.productname = product.productName;
module.exports.productprice = product.productPrice;

As of now export is done. Next to work with Prdouct.js module in any other files(module) we need to load it. So this can be loaded in server.js using require

clip_image002[6]

After loading module in product variable, you can access productname as

clip_image004

In Server.js productprice and productname from Product.js can be fetched as below,


var product = require('./product');
var pname = product.productname;
console.log(pname);
var pprice = product.productprice ;
console.log(pprice);


In output you should get productprice and proudctname printed. If you try to access productstock you will get error since this is not exported.

I hope you find this post useful. Thanks for reading.

Can you answer these 10 basic Knockout Questions?

Q1. KO performs following operations

 

  1. Automatic Refresh
  2. Two way Binding
  3. Templating
  4. All of the above

 

Q2. On which event bindings in KO fire notification

 

  1. Change event
  2. Update event
  3. On Any event
  4. None of the above

 

Q3. Value of computed observable is determined at

  1. Time of creation
  2. Time of update
  3. Time of DOM loading
  4. Depends on implementation

 

Q4. ko.toJSON is used for following purpose

 

  1. convert objects that include observables to a JSON string
  2. to convert string to object
  3. to consume JSON service
  4. to consume any service

 

Q5. How we can add reference of KO in project

 

  1. using local reference
  2. using CDN
  3. using Nuget package
  4. all of the above

 

Q6. On which value of ViewModel property visible binding will be set to block?

 

  1. Null
  2. Undefined
  3. Zero
  4. All of the above

 

Q7. ViewModel can be created as

 

  1. Object literal
  2. Function
  3. Both
  4. None of the above

 

Q8. Click binding can be bind to what kind of property in ViewModel

 

  1. Function
  2. Boolean
  3. Array
  4. All of the above

 

Q9. For what purpose we use foreach binding in KO

 

  1. To duplicates section of markup for each entry in array
  2. To duplicates section of markup for each entry in ViewModel
  3. To duplicates section of markup for each entry in Model
  4. None of the above

 

Q10. The Value binding should be used with

  1. <input> , <select> , <textarea>
  2. <span>, <div>
  3. <radiobutton> <table>
  4. All of the above combination

Working with OS Module in Node.JS

In this post we will take a quick look on OS module in Node.js. OS module is to work with OS component. It provides some functionality to work with Operating System. Using this module you can get following information like below,

  • OS target version
  • Host name
  • OS temp folder
  • Total memory in system
  • Free memory in system
  • Load on system etc.

To work with os module you need to load the module first. You can load module as given below,

clip_image001

After loading os module you can use it to display operating system temp directory as below,

clip_image002

You can access host name as following,

clip_image003

You can access total memory and free memory as below,

clip_image004

You can access OS type and platform as below,

clip_image005

You can fetch CPU information as below,

clip_image006

Node will return output as below,

clip_image008

We saw that os module is very important to fetch information about operating system. Putting all together you can get various os information as below,


var os = require('os');
console.log(os.hostname());
console.log(os.totalmem());
console.log(os.freemem());
console.log(os.tmpdir());
console.log(os.uptime());
console.log(os.type());
console.log(os.platform());
console.log(os.cpus());

I hope you find this quick post on Node os module useful. Thanks for reading.

Create your First MVVM based JavaScript App in two simple steps using Knockoutjs

Read all Knockoutjs posts here

Setting up Visual Studio 2013 for Knockoutjs Development

Okay purpose of this post is very simple to explain you why Knockoutjs. I will try to put it in simplest way that Why we need to work Knockoutjs. If you are not a begineer then probably this post may appear very simple to you. However I request keep reading this post.

Without Knockoutjs

Let us start with an application as given below. Application got two input box and a span to display a message.

image

Requirement of this application is as follows ,

  • Pull data from a data source. In this scenario data source is a plain JavaScript object.
  • Create a custom message.
  • Display message in label.
  • When data changes in input boxes notify back to data source.

Let us do it using jQuery and without Knockoutjs. Above view can be created simply as below,



 <h1>KO Demo</h1>   
     <span id="spnProductName">Product Name</span> <input type="text" id="txtProductName" />
     <span id="spnProductPrice">Product Price</span><input type="text" id="txtProductPrice" /><br />
    <h2> <span id="spnMessage"></span> </h2>   


A datasource can be created as plain JavaScript object. This can be created as below,


  var Product =
        {
            productName: "Pen",
            productPrice: 200
        };

Next we need to bind this data to input boxes element on DOM. This can be done using jQuery selectors. We need to select elements and assign values to elements.


    $("#txtProductName").val(Product.productName);
    $("#txtProductPrice").val(Product.productPrice);
    var message = Product.productName + " costs " + Product.productPrice;
    $("#spnMessage").text(message);


In above code snippet we are creating a custom message reading values from JavaScript object and then assigning that to span element on DOM.

This is what all we need to do. When you run application you should get elements are prepopulated with data from JavaScript object.

clip_image001

One major problem in above implementation is that if you change Product Name or Product Price, it will not get notified to data source. Here you are pulling data from the data source and there is no binding between elements and data source.

In simple words when you change value of Product Name or Product Price custom message will not change by default. Off course you can implement it using jQuery but that would be complex.

With Knockoutjs

Now let us implement above requirement using Knockoutjs. In Ko we need to create

  • Model
  • ViewModel
  • View

In this requirement we will create only ViewModel and View.

Step 1: Creating View

A View is nothing but HTML elements. So we can reuse view used in above example. But we need to use data-bind attribute of HTML5 to bind data from data source. For example if you want to display (bind) Product Name in first input box. To do this we will bind value attribute to productName (this is property representing Product Name in ViewModel)

image

We can create complete View of application as below,



<h1>With KO</h1>
     <span id="spnProductNamek">Product Name</span> 
    <input type="text" 
          id="txtProductNamek" 
           data-bind="value:productName" />

     <span id="spnProductPricek">Product Price</span>
    <input type="text" id="txtProductPricek" 
        data-bind="value : productPrice" />
    <br />
    <h2> <span id="spnMessagek" data-bind="text:message"></span> </h2>



You can see in View implementation that we are binding Product Name, Product Price and Message to different elements.

Step 2: Creating ViewModel

A ViewModel can be created as a simple JavaScript Objects. We need to keep in mind that to enable Two Way Binding properties of object should be as Knockout Observable. ViewModel can be created as follows,


 var ProductViewModel =
      {
          productName: ko.observable("Pen"),
          productPrice: ko.observable(200),
                 
      };


Next we need to create Message property as Computed Observable. Computed Observable can be created follows,

image

To create computed observable you need to pass a function and name of the ViewModel. Note that there are various ways to create ViewModel. For purpose of this post we followed this approach to add computed observable to ViewModel.

As last step we need to apply binding or link ViewModel to a Node on DOM. If you want to bind ViewModel to whole body then you can skip second parameter.

image

Putting above discussion together and full source code to create app using MVVM and KO are as follows


   var ProductViewModel =
      {
          productName: ko.observable("Pen"),
          productPrice: ko.observable(200),
                 
      };

    ProductViewModel.message= ko.computed(function () {
        var m = this.productName() +
                 " costs " +
                 this.productPrice();
        return m;
    }, ProductViewModel)

    ko.applyBindings(ProductViewModel)


Now let us go ahead and run application.

clip_image001[6]

In above application when you change value in any of the input boxes, immediately message in label will be changed.

So we witnessed that two way binding and automatic UI refresh is very simple to implement using Knockoutjs.  I hope you find this post useful. Thanks for reading.

Setting up Visual Studio 2013 for Knockoutjs Development

In this post we will learn step by step to setup development environment for Knockout.js in Visual Studio 2013.

Also we will see how to enable intellisense for KO in VS2013.

To start with, I am going to create an ASP.NET Empty Web Application. We will set up this empty web application for Knockoutjs development.

image

There are two ways you can add Knockout library in project

  1. Manually adding KO JS files locally in project
  2. Using NuGet to add KO reference files in project

I am adding references using NuGet. We need to add following references in project

  1. Knockout.js
  2. jQuery

To manage NuGet package right click on project and from context menu select option Manage Nuget Package. You will get below dialog box. In search option put Knockout. You will get knockoutjs as first option. Click on Install.

clip_image002

Once you have Knockoutjs installed, search for jQuery and install that in project as well. After successful installation of these two libraries you will find a Scripts folder in project. Scripts folder will have files for Knockoutjs and jQuery.

clip_image003

Now go ahead and add

  • HTML file
  • JS file in project

On HTML you need to add following references. In below scenario default.js is file we are adding. We will write code behind script in default.js file.

clip_image002[6]

Next step is very important. We need to enable intellisense on default.js to work with KO. To enable this drag and drop knockout-3.0.0.debug.js file on default.js. After dragging and dropping you should able to see following reference added.

clip_image004

 

Now you will find intellisense is working fine in default.js to work with jQuery and KO. This is what all you need to do to set up VS2013 to work with Knockoutjs. In next post I will show you how to write first MVVM App in three simple steps using Knockoutjs. I hope you find this quick post useful. Thanks for reading.