Elegant JavaScripts: January 2016

AngularJs : AJAX calls with Angular js

AJAX is a necessary part of today web applications. So how to make an AJAX call with AngularJs.

Think we need to make an ajax call to server to get details of a set of student and display when a button clicked.

Here is the complete code for that scenario and I will explain later what happens there.


<!DOCTYPE html>
<html>
   <head>
      <title>Ajax With Angular</title>
      
      <style>
         table, th , td {
            border: 1px solid grey;            
            border-collapse: collapse;
            padding: 5px;
         }         
          th{
               background: lightgray;
          }
      </style>

NodeJs : Handling an AJAX call

Making AJAX calls to server is now a common things in web applications because it provide a better user experience than refreshing a complete page.

Here is a simple HTML page with a text box to search, when user type something in that and press enter an AJAX call will be sent to server

Serving static HTML, JavaScript, CSS files with Express.

How to serve a content according to a requested URL is demonstrated in most for beginners' Express and NodeJs tutorials . But sending just a string is not enough for considerable project. Created HTML, JavaScript and CSS files should be served when get a user request.

See this HTML page
This was taken from a previous post of How to upload files with express.


<!DOCTYPE html>
<html>
<head>
<title>File Uploading Form</title>      
</head>
<body>
<h3>File Upload:</h3>
Select a file : <br />
<form id = "uploadForm" enctype =  "multipart/form-data" action="/upload" method = "post" >
<input type="file" name="upload_file" />
<input type="submit" value="Upload" name="submit">/form>
    
    <script src="/jquery-1.11.3.js"></script>
    <script src="/upload.js"></script>    
</body>
</html>



function sameElementsNaive(a, b) {    
    var count =0;
    for(i=0;i<a.length;i++){
        for(j=0;j<b.length;j++){
            if(a[i]==b[j]){
                count++;
                break;
            }
        }
    }
    return count;
}

Here Two inputs to the function are integer arrays (can be change to other data types as well).

Ex:
sameElementsNaive([1,2,3], [3,4,5]);
this function call should return 1 because only 3 is duplicated in the second array.

Responsive Square grid with HTML and CSS

Adding a grid with responsive square to our web page is simple than most of us think.

CSS


.container{    
    width: 100%;
    background: lightgray;    
    display: inline-block;
}

.container div {    
    float:left;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color: #1E1E1E;    
}

Angular Js : Root Scope of an Application

When we are dealing with scopes in an angular Js app it is important to know which scope you are dealing with, at any time. If you have only one scope in your application it is not necessary to be careful about what scope you are using, but for larger application it is not the case, there can be sections in the HTML DOM which can only access certain scopes.

However all applications have a root scope that is available in the entire application. Here is an simple example on how to access root scope in an Angular Js application.

Module and Controller for the app


var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["DOG", "BIRD", "COW"];
    $rootScope.lastname = "ANIMALS";
});

JQuery : Adding DateTime picker for your form

Adding a date picker to your web form is a handy way instead of just typing dates.

It is simple.

Loading necessary JavaScript and CSS files


<!-- Load jQuery from Google's CDN -->
    <!-- Load jQuery UI CSS  -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    
    <!-- Load jQuery JS -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Load jQuery UI Main JS  -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

NodeJs : Uploading files with Express & Multer

Uploading files to server is one of the mostly used features in modern web applications. If you are using node.js "busboy" was the best solution for sometime. But it is somewhat complicated as you can see from examples in it's GitHub homepage.

Multer is the latest best solution for this problem. it is a node.js middle-ware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

Here is an example of how to use Multer to upload files.

Node.Js : Basic routing with Express

Express framework provide different basic ways to configure routing in our web application. Check out my previous post of how to set up a simple HTTP server with Express and Node.Js if you are new to Node and Express.

Handling HTTP requests with different routs

Handling GET request


//respond to a get request on URL "/"
app.get('/',function(req,res){
 res.send('Hello Express');
});

Here URL can be specified as we want instead of "/".

Encapsulation : private variables in JavaScript

Encapsulation is an one of main concepts in object oriented programming. Encapsulation is the ability that an object has to forbid external access to chosen properties and methods, so that they can only be called by other methods of same object and protect from external unwanted access.

A normal code Snippet


function SecretCode(){
    secretNumber=Math.floor((Math.random() * 10) + 1);     
    
    this.getSecret=function(){
        return secretNumber;
    }
}

var secret1 = new SecretCode();
document.write("value of secret number "+secret1.secretNumber+"<br/>");

document.write("value of secret number : "+secret1.getSecret()+"<br/>");

SecretCode.prototype.getSecretCode= function(){
    return this.secretNumber;    
}

document.write("Secret number is "+secret1.getSecretCode()+"<br/>");

Simple JavaScript : Accessing properties of objects.

There are mainly two ways to access a property in JavaScript.

Using dot notation (.)
Using square bracket notation ([])

Consider an object like this.


var employee={
    name:"Antony",
    age:26
}

We can access properties of employee object in both ways.

```
employee.name
```
```
employee["name"]
```

But Consider a object that has non-string property names. Some times we have to use object property names with non-string types.
Ex:

var marks={
    30:"bad",
    70:"good"
}

In here we won't be able to properties with both notation. Only marks["30"] will work.

Creating objects for your design pattern in JavaScript

There are few different ways of creating objects in JavaScript and different ways of using those objects. Most of the beginners in JavaScript are confused with those different ways of handling objects.

Here is a list of few different styles mostly used by developers to create objects.

Object constructor


var person = new Object();

person.name = "Mark",
person.getName = function(){
  return this.name ; 
};

JavaScript : Inheritance in JavaScript

JavaScript is not a class based language, So it is bit confusing for most of developers familiar with languages like Java or C#.In-order to understand how inheritance work in JavaScript you need to have a good understand about how prototype objects work in JavaScript.

Every object in JavaScript has an internal link to a object. That object is called prototype object. When we trying to access a property from a object JavaScript will first look in that object and if that property is not found next the prototype object will be searched . Refer this link for more details.

So if we want want to inherit properties from another object we can simply point prototype to that object.