Important concepts about Javascript for Node JS Developer

Special Values
Null,undefined,{},NaN,Infinity

Special Datatype
object,function,string,number

Typecase
parseInt(),parseFloat(),Boolean()

check datatype :
typeof()-return as string like 'number','object'
instanceof-[] instanceof Array=>true
isNaN(),isFinite()

String Functions:
length,indexOf(),substr(),slice(),split,trim(),search(REGULAR EXPR)

Create Object:
var obj1={first_name='manab',last_name='basu'}

delete properties from object:
delete user.first_name

to add properties in object :
user["first_name"]="Manab"

lenght Of Object
Object.keys(user).length

Array:
Create Array:var arr=[] or var arr=['a','b','c']
typeof arr=Object

Check : Array.isArray(arr)

Add Item: arr.push('a') or arr[4]='a' or arr.unshift('c')- add element at beginning

Delete Item-delete arr[3] or arr.pop()-pop item from the end,arr.shift()-Remove item from begening

Extract Element from array-arr.splice(START_INDEX,NO OF ELEMENT) & it reduce the array size based on NO OF ELEMENT

String to array:"A,b,c".split(',');

Array to string:[1,2,3].join(":");=>1:2:3

Sort:arr.sort()

Sort String of array(names):
names.sort(function(a, b){
var a1=a.toLowerCase(),b1=b.toLowerCase();
    if(a1 < b1) return -1;
    if(a1 > b1) return 1;
    return 0;
})

Functions:
check arguments:write- console.log(arguments);- within function

Constraint
Ternary Operator: var x=today?"X":"Y"

prototype:The prototype property is initially an empty object, and can have members added to it - as you would any other object.
var myObject = function(name){
    this.name = name;
    return this;
};
console.log(typeof myObject.prototype); // object
myObject.prototype.getName = function(){//adding a new member getName() to the class myObject
    return this.name;
};
or
function Shape(){
};
Shape.prototype.X=0;
Shape.prototype.Y=0;
Shape.prototype.move=function(x,y){
 this.X=x;
 this.Y=y;
}
Shape.prototype.distance=function(){
 return Math.sqrt(this.X*this.X+this.Y*this.Y);
}
//call
var s=new Shape();
s.move(10,10);
console.log(s.distance());

Inheritance:
function Square(){}
Square.prototype=new Shape();
Square.prototype.__proto__=Shape().prototype;
Square.prototype.width=0;
Square.prototype.area=function(){
 return this.width*this.width;
}
var sq=new Square();
sq.move(5,5);
sq.width=15;
console.log(sq.distance());
console.log(sq.area());
Error Handling:
function test(){
 throw new Error("Bad Error");
}
//Calling Function
try{
 test();
}
catch(e){
 console.log(e.message);
}
Global: global object
global.name="Manab";
global["name"];

Node Js Cluster

A cluster is a pool of similar workers running under a parent Node process. Workers are spawned using the fork() method of the child_processes module. This means workers can share server handles and use IPC (Inter-process communication) to communicate with the parent Node process.

The master process is in charge of initiating workers and controlling them. You can create an arbitrary number of workers in your master process. Moreover, remember that by default incoming connections are distributed in a round-robin approach among workers (except in Windows).

A cluster module contains several events. Two common events related to the moments of start and termination of workers are the online and the exit events. online is emitted when the worker is forked and sends the online message. exit is emitted when a worker process dies.

Example:

package.json
{
  "name": "democluster",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":{
    "express":"*"
  }
}


index.js

var cluster = require('cluster');
if(cluster.isMaster) {
    var numWorkers = require('os').cpus().length;
    console.log('Master cluster setting up ' + numWorkers + ' workers...');
    for(var i = 0; i < numWorkers; i++) {
        cluster.fork();
    }
    cluster.on('fork', function(worker) {
        console.log('worker:' + worker.id + " is forked");
    });
    cluster.on('online', function(worker) {
        console.log('worker:' + worker.id + " is online");
    });
    cluster.on('listening', function(worker) {
        console.log('worker:' + worker.id + " is listening");
    });
    cluster.on('disconnect', function(worker) {
        console.log('worker:' + worker.id + " is disconnected");
    });
    cluster.on('exit', function(worker) {
        console.log('worker:' + worker.id + " is dead");
        console.log('Starting a new worker');
        cluster.fork();
    });

  
} else {
    var app = require('express')();
    app.all('/*', function(req, res) {res.send('process ' + process.pid + ' says hello!').end();})
    var server = app.listen(8000, function() {
        console.log('Process ' + process.pid + ' is listening to all incoming requests');
    });
}


OUTPUT IN CONSOLE:

Master cluster setting up 4 workers...
worker:1 is forked
worker:2 is forked
worker:3 is forked
worker:4 is forked
worker:1 is online
worker:4 is online
worker:2 is online
worker:3 is online
Process 8892 is listening to all incoming requests
worker:1 is listening
Process 16192 is listening to all incoming requests
worker:4 is listening
Process 9412 is listening to all incoming requests
Process 15596 is listening to all incoming requests
worker:3 is listening
worker:2 is listening

Reference: http://www.sitepoint.com/how-to-create-a-node-js-cluster-for-speeding-up-your-apps/

Node js Child Process -exec, spawn and fork

There are two methods for running child processes under Node.js - exec and spawn.

child_process.exec(command, [options], callback)=>exectest.js
child_process.spawn(command, [args], [options])=>spawntest.js
There is an alternative of exec called spawn. Unlike exec it launches a new process and should be used if we expect long-time communication with the running command.

Exec() and spawn() both create processes, but they differ in what they return, spawn returns streams (stdout & stderr), while exec returns a buffer with a max size. Spawn() should be used when the process returns large amount of data.

 Another difference is that spawn() starts receiving the response as soon as the process starts executing, and exec() otherwise waits for the process to end and tries to return all the buffered data at once

 The fork method is a special case of the spawn() functionality, it only creates Node processes. Its signature is the following:

 child_process.fork(modulePath, [args], [options])=>forktest.js

Difference Between Spawn, fork and exec :

 require('child_process').spawn() starts sending back data from the child process in a stream as soon as the child process starts executing. When you run this command, it send a system command that will run on its own process rather than executing code within your node process. In this no new V8 instance will be created and only one copy of the node module will be active on the processor. It is used when you want the child process to return large amount of data to Node.

require('child_process').fork() is a special instance of spawn thats runs a new instance of the V8 engine. Which actually means you are creating multiple workers running on the same Node code base for different task.

require('child_process').exec() returns a buffer from the child process. The default buffer size is 200k. It is asynchronous, but it waits for the child process to end and tries to return all the buffered data at once. If your return data from the child process is greater than 200k then you will get maxBuffer exceeded.

ref:http://www.codingdefined.com/2014/08/difference-between-fork-spawn-and-exec.html

Example :

package.json:

{
  "name": "demochildprocess",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

exectest.js

const
fs = require('fs'),
process = require('child_process');

for(var i=0; i<3; i++) {
 var ls = process.exec('node worker.js '+i, function (error, stdout, stderr) {
    if (error) {
      console.log(error.stack);
      console.log('Error code: '+error.code);
      console.log('Signal received: '+error.signal);
    }
    console.log('stdout: ' + stdout);
    console.log('stderr: ' + stderr);

  });

  ls.on('exit', function (code) {
    console.log('Child process exited with exit code '+code);
  });

}

/*Output:
Child process exited with exit code 0
stdout: Process 0 at work
stderr:

Child process exited with exit code 0
stdout: Process 1 at work
stderr:

Child process exited with exit code 0
stdout: Process 2 at work
stderr:*/

spawntest.js

const
 fs = require('fs'),
 process = require('child_process');

/*Create 10 worker process*/
for(var i=0; i<3; i++) {
 var ls = process.spawn('node', ['worker.js', i]);

 ls.stdout.on('data', function (data) {
   console.log('stdout: ' + data);
 });

 ls.stderr.on('data', function (data) {
   console.log('stderr: ' + data);
 });

 ls.on('close', function (code) {
   console.log('child process exited with code ' + code);
 });
}

/*
stdout: Process 0 at work

stdout: Process 1 at work

child process exited with code 0
child process exited with code 0
stdout: Process 2 at work

child process exited with code 0
*/

forktest.js

const
 fs = require('fs'),
 process = require('child_process');
   

for(var i=0; i <3; i++) {
 var ls = process.fork("worker.js", [i]);

 ls.on('close', function (code) {
   console.log('child process exited with code ' + code);
 });
}

/*
Process 0 at work
child process exited with code 0
Process 1 at work
Process 2 at work
child process exited with code 0
child process exited with code 0

*/

Blog Summary

Feed Of this blog:
http://portal-management.blogspot.com/feeds/posts/default
http://feeds.feedburner.com/PortalAndContentManagement

Translate ToChinese Korean French German Italian I am Manab from kolkata. Engineering graduate and presently working in an IT company. Love to share my knowledge with all and to make lots of friends.

Adobe Flex Self Closing Alert in Flex Validating Email Address in Flex Validating Integers and Real number in Flex Validating Numbers in Flex Drag Drop Treeview nodes in Flex Toggling Columns of Grid in Flex File Downloader Control in Flex Calculate date difference between two selected days sorting XMLListCollection using MXML Flex Sort Array Collection in Adobe Flex .NET and Flex Integration Flex Tutorials 1-Create a new project and Debug the Flex Application Flex Tutorials 2-Define absolute layout,VBox & HBox Flex Tutorials 3-Data binding in Adobe Flex Flex Tutorials 4-Event Handling in Adobe Flex Flex Tutorials 5-Navigation Control in Adobe Flex Flex Tutorials 6-Retrieving XML Data using HTTP Service Flex Tutorials 7-Handling different viewstate in Adobe Flex Flex Tutorials 8-Using Datagrid and TileList in Adobe Flex Flex Tutorials 9-Manipulating XML in Adobe Flex Flex Tutorials 10-Filter Function in Adobe Flex Flex Tutorials 11-Sort Function and ICursur in Adobe Flex Flex Tutorials 12-Valiation Control in Adobe Flex Flex Tutorials 13-Regular Expression in Adobe Flex Flex Tutorials 14-Currency Formatter in Adobe Flex Flex Tutorials 15-How to Call WebService in Adobe Flex Flex Tutorials 16-Multiple file uploader in .NET using Adobe Flex Swf Flex Tutorials 17-Animation and Embedding Images in Adobe Flex

Application Architecture Microsoft Best Practices Analyzer for Windows SharePoint Services 3.0 and the 2007 Microsoft Office System Design patterns Application Architecture Tutorial 1-UML Diagram:Use case Tutorial 2-UML Diagram:Class diagrams Tutorial 3-UML Diagram:object diagrams Tutorial 4-UML Diagram:Sequence diagrams Tutorial 5-UML Diagram:Collaboration diagrams Tutorial 6-UML Diagram:Statechart diagrams Tutorial 7-UML Diagram:Activity diagrams Tutorial 8-UML Diagram:Component and deployment diagrams Static Constructor Implementation of factory Pattern Implementation of Singleton Pattern Implementation of Builder Pattern Design Patterns Overview

C# Tutorial 1:Getting Started with C# Tutorial 2:Operators, Types, and Variables Tutorial 3:Control Statements - Selection Tutorial 4:Methods Tutorial 5:Namespaces Tutorial 6:Introduction to Classes Tutorial 7:Class Inheritance Tutorial 8:Polymorphism Tutorial 9:Properties Tutorial 10:Indexers Tutorial 11:Interfaces Tutorial 12:Delegates Tutorial 13:Events Tutorial 14:Exception Handling

ASP.NET Handling Dropdownlist Event within a Gridview Some common general important method for .NET Server side Message box when Ajax is using ASP.NET Treeview checkbox with select all ASP Treview Checkbox Work as Radiobutton Generating PDF from .NET Generate Excel from Gridview when using Masterpage HL7 Parsing using .NET Accessing Server side values from client Side Upload any file into a database Progressbar in Ajax Server side messagebox How can I enable right click on a control in a aspx webpage Client Side Callbacks in ASP.NET 2.0 Javascript YES NO Confirm Dialog .NET and Flex Integration Gridview With Fixed Header How to know the IP Address of the user who visit my Site Call Master page event in Content page Web Editor for ASP.NET What is new in .NET 2.0 Check file type of FileUpload control for asp.net GridView with Fixed Header and Freeze Column Difference between Constant And Readonly Difference between ref and out Disable cache for Popup window in asp.net Display Image in gridview and export it Binding ASP .NET Treeview with LINQ to Stored Procedure Introduction to Entity Framework-Part I Introduction to Entity Framework-Part II

ASP.NET Tips and Tracks .NET Tips & Tracks How to place both VB and CS File in App_Code directory Delete all files from a folder

EBooks on .NET Microsoft Best Practices Analyzer for Windows SharePoint Services 3.0 and the 2007 Microsoft Office System Design patterns Application Architecture Free EBooks On .NET

EBooks on Javascript EBooks on Javascript

EBooks on SQL Server EBooks on SQL Server

Javascript Server side Message box when Ajax is using ASP.NET Treeview checkbox with select all ASP Treview Checkbox Work as Radiobutton Accessing Server side values from client Side Disable Back Button in the browser Javascript YES NO Confirm Dialog Parsing Querystring using Javascript

SQL Server SQL Server How to empty all the tables in a database Searching Any String From A Database Find missing and duplicate number from a sequence of numbers in SQL table Generate random numbers in T-sql Sql Server 2005 Mirroring within Workgroup or Domain without FQDN Dynamic Bulk Copy using OPENXML Get all Child IDs from Self Referential Table(DFS) Rank Function in SQL Server Summarizing Data Using ROLLUP and CUBE Maximum Capacity of different properties for SQL Server What are the default databases of SQL Server How to get records in random order from a sql query in sql server? Different Isolation Level in SQL Server 2005

SQL Server 2008 What is new in SQL Server 2008

Visual Studio 2008 Anonymous Types USING LAMBARD EXPRESSION Tutorials on LINQ Video Tutorials on .NET 3.5 What is new in .NET 3.5 VS.Net 2008 Tutorial and Training Tutorial 1:Create a Simple Workflow Tutorial 2:Receiving Data into the Workflow using Parameters C# 3.0 Tutorial -1:Var Keyword C# 3.0 Tutorial -2:Extension Methods C# 3.0 Tutorial -3:Lambda Expressions C# 3.0 Tutorial -4:Object Initializers C# 3.0 Tutorial -5:Anonymous Types C# 3.0 Tutorial -6:Type Equivalence C# 3.0 Tutorial -7:Projections C# 3.0 Tutorial -8:Linq C# 3.0 Tutorial -9:Linq To Entities Silverlight with LINQ and WCF Introduction to Linq To Stored Procedure

WWF Tutorial 1:Create a Simple Workflow Tutorial 2:Receiving Data into the Workflow using Parameters Basics Of Windows Workflow Foundation

WCF Advantages of WCF over Webservice Create A Step by Step WCF Application Basics Of Windows Communication Foundation Create Multi Layer Architecture using WCF

Visual Studio 2010 Video Tutorials on VS 2010 New Features in .NET Framework 4.0 What is F# F# As a Language and F# for Developers Introducing Windows Azure

Sharepoint Microsoft Best Practices Analyzer for Windows SharePoint Services 3.0 and the 2007 Microsoft Office System Free Download Sharepoint Template Step by Step Tutorials for Sharepoint Introduction to Sharepoint. How to Get Latest News on Sharepoint Technology How to create workflow in sharepoint designer WSS Events Features in Sharepoint WSS Content Type WSS Site Column Webparts in WSS Creating WSS Wikies & Blogs Difference between Windows SharePoint Services (WSS) and Microsoft Office SharePoint Server 2007 (MOSS) Sharepoint Object Model Overview SPSite and SPContext SPSiteDataQuery SPQuery SPDocumentLibrary SPFolder And SPFile SPContentType SPField SPListItem SPList SPWeb How to discover all the list from a site collection Creating Feature In Sharepoint Adding an Event Handler to a Feature Debugging WSS Components Custom Application Page for the ECB Menu Creating Custom Application Page Create Pages Using Object Model Creating a Simple Webpart using usercontrol Create SPList programmatically Create A Simple Feature Create a simple webpart Create a connected web part and activate through feature Create a custom application page in sharepoint 2007 Create Custom Sitepages in Sharepoint 2007 Create a custom Field in Sharepoint 2007 Create a List event receiver feature

XSLT Tutorials XSLT Tutorials

Miscellaneous Introduction to Microsoft .NET Micro Framework (NETMF) Bind MSChart with Dataset and handle Click event of the chart

Cost Estimation Estimation using Fuction Point Analysis-EI(Part 1) Estimation using Fuction Point Analysis-EO,EQ(Part 2) Estimation using Fuction Point Analysis-EIF,ILF(Part 3) Estimation using Fuction Point Analysis-GSC(Part 4) Estimation using Fuction Point Analysis-Productivity Factor(Part 5) Estimation using Fuction Point Analysis-Phase Considaration and cost calculation(Part 6) Cost Estimation using use case points

Mean Stack NODE JS and MEAN Stack Managing Node Version and Editor Node JS Modules Creating an HTTP Server using Node JS Managing HTTP request using Node JS Configure responses from a Node.js web server Creating a Node.js HTTP Client Application Serving a HTML file from Node JS AngularJS Angular JS Routing Node.js - Event Loop and Event Emitter Express Node JS File System Node JS Streams  Mongodb Overview Install NodeJS without Admin Right Node JS debugging Angular JS Tutorial1: ng-model,ng-bind and Expression... Angular JS Tutorial2: ng-init,ng-repeat,sharedscope... Angular JS Tutorial3: ng-controller,filter Angular JS Tutorial4: ng-include Angular JS Tutorial5: ngroute Angular JS Tutorial6: Login page using routeScope,check,resolve,location... Angular JS Tutorial7: http service and Search Filter... Angular JS Tutorial8: $digest and $watch Angular JS Tutorial9: services,factory,provider Node Session Management using memcached and run node in multiple server using http-Proxy... Node js Child Process -exec, spawn and fork Node Js Cluster Important concepts about Javascript for Node JS De...

Node Session Management using memcached and run Proxy Server as Windows Service

To Install as a windows service:
npm install winser --save
package.json should contain "start": "node proxy-server.js"
run C:\Manab\Education\nodedemo\demomultiprocessor\node_modules\.bin\winser -i and check services.msc->proxy_demo->and start the service
open three command prompt and type 'node server.js 8081','node server.js 8082',node server.js 8083' respectively in 3 cmd prmpt and call proxy by http://localhost:8080.We can see response from 3 node server for each request.


Uninstall windows service :
C:\Manab\Education\nodedemo\demomultiprocessor\node_modules\.bin\winser -r

Session management in node when running on multiple server:
Downaload memcached in C:\Manab\Education\nodedemo\demomultiprocessor\memcached from https://commaster.net/content/installing-memcached-windows and
run following command to install as a windows local service (as administrator)
C:\Manab\Education\nodedemo\demomultiprocessor\memcached>memcached -d install
run below command to start the service
C:\Manab\Education\nodedemo\demomultiprocessor\memcached>net start memcached

Set memory and port for memcached :
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\memcached=>imagepath="C:\Manab\Education\nodedemo\demomultiprocessor\memcached\memcached.exe" -d runservice -m 10 -p 12345
install memcached modules
npm install memcached --save
and use the imagepart port while creating the object of memcached in server.js
var Memcached = require('memcached');
var memcached = new Memcached('localhost:12345');

Code :

server_list.json :

{
 "servers" :[
 {
  "host":"localhost",
  "port":"8081"
 },
 {
  "host":"localhost",
  "port":"8082"
 },
 {
  "host":"localhost",
  "port":"8083"
 }
           ]
}

Package.json :

{
  "name": "proxy_demo",
  "version": "1.0.0",
  "description": "demo the proxy",
  "main": "index.js",
  "scripts": {
    "start": "node proxy-server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "http-proxy": "0.8.x",
    "memcached": "^2.2.1",
    "winser": "^1.0.2"
  },
  "start": "node proxy-server.js"
}

server.js :

var http=require("http");
var Memcached = require('memcached');
var memcached = new Memcached('localhost:12345');
var lifetime = 86400;
var lastport='';
console.log("Creating server");
var s=http.createServer(function(req,res){
 console.log("listing on "+process.argv[2]);
 memcached.get('lastport', function( err, result ){
  if( err ) console.error( err );
   lastport=result;
   console.dir('reading lastport'+ lastport );
   res.end("I am listing on port:" + process.argv[2] + "and last port is " +lastport);
 
 })
 memcached.set('lastport', process.argv[2], lifetime, function( err, result ){
  if( err ) console.error( err );
  console.dir( result );
 });
 //res.end("I am listing on port:" + process.argv[2]);
});
s.listen(process.argv[2]);

proxy-server.js :

var http_proxy=require("http-proxy");
var fs=require("fs");
var servers=JSON.parse(fs.readFileSync('server_list.json')).servers;
var s=http_proxy.createServer(function(req,res,proxy){
var target=servers.shift();
console.log(target);
proxy.proxyRequest(req,res,target);
servers.push(target);
});
s.listen(8080);

run: node proxy-server.js

Open browser and try http://localhost:8080

Angular JS Tutorial9: services,factory,provider

AngularJS Service, Factory or Provider all are used for the same purpose of creating utility function that can be used throughout the page with inject-able object. However, the way it is created and the way it is used are different. Here we shall try to understand them clearly.


AngularJS Service:
Angular Service is used to for sharing utility functions with the service reference in the controller. Service is singleton in nature so for once service only one instance is created in the browser and the same reference is used throughout the page.In the service, we create function names as property with this object.

AngularJS Factory :
The purpose of Factory is also same as Service however in this case we create a new object and add functions as properties of this object and at the end we return this object.

AngularJS Provider:
The purpose of this is again same however Provider gives the output of it's $get function.

Example :

9.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>services,factory,provider</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="9controller.js"></script>

</head>
<body ng-app="myapp" ng-controller="mycontroller">
 {{mymessage}}

</body>
</html>

9controller.js:
var app=angular.module('myapp',[]);

app.service('myservice',function(){
 this.mymessage='this is from my service';
}
);
app.factory('myfactory',function(){
 var factory={};
 factory.mymessage='this is from my factory';
 return factory;
}
);
app.provider('myprovider',function(){
 var m1='this is from my provider';
 return {
  setMessage:function(name){//1)its required,if we need set the value
   m1 += name;
  },
  $get:function(){
   return {
    message:m1
   }
  }
 }
});
//2)its required,if we need set the value
app.config(function(myproviderProvider){//ProviderSuffix
 myproviderProvider.setMessage("Manab");
});
app.controller('mycontroller',function($scope,myservice,myfactory,myprovider){
 $scope.mymessage=[myservice.mymessage,myfactory.mymessage,myprovider.message];
});
// app.controller('mycontroller',function($scope,myservice,myfactory){
//  $scope.mymessage='ddd';
// });

Output:

Angular JS Tutorial8: $digest and $watch

$digest() is useful when we want to hook up a vanilla javascript in angularjs.

When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally. A watch means that AngularJS watches changes in the variable on the $scope object. The framework is "watching" the variable. Watches are created using the $scope.$watch() function


<!DOCTYPE html>
<html lang="en" >
<head>
 <title>$digest,$watch</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

 <script type="text/javascript">
  var application=angular.module('myapp',[]);
  application.controller('mycontroller',function($scope)
  {
   $scope.myRandomNumber=Math.random();
   $scope.counter=-1;
   document.querySelector('input').addEventListener('click',function(){
    $scope.myRandomNumber=Math.random();
    $scope.$digest();
    $scope.$watch('myRandomNumber',function(newValue,oldValue)
    {
     if($scope.counter==5)
      alert('You reach at 5');
     $scope.counter++;
    }
    );
   },false);
  }
  );
 </script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
 {{myRandomNumber}}
 <br/>
 <input type="button" value="Generate Random Number"/>
</body>
</html>

Angular JS Tutorial7: http service and Search Filter

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.

Example :

Create a sample data file 7data.json as below
{
 "customers":[
  {
  "Name":"Steve",
  "Age":"30",
  "Location":"eastleigh"
  },
  {
   "Name":"Ari",
   "Age":"40",
   "Location":"eastleigh"
  },
  {
   "Name":"Clare",
   "Age":"35",
   "Location":"hedgeend"
  },
  {
   "Name":"Stu",
   "Age":"20",
   "Location":"southampton"
  }
   ]
}

7.html:
<!DOCTYPE html>
<html lang="en" >
<head>
 <title>$http,searchFilter</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="7controller.js"></script>
</head>
<body ng-app="myapp">
 <div ng-controller="mycontroller">
  <ul>
   <h2>Customer Details</h2>
   Any Search:<input type="text" ng-model="searchcriteria.$"></br></br>
   Name Search:<input type="text" ng-model="searchcriteria.Name"></br></br>
   Age Search:<input type="text" ng-model="searchcriteria.Age"></br></br>
   Location Search:<input type="text" ng-model="searchcriteria.Location"></br></br></br>
   <li ng-repeat="customer in customerdata|filter:searchcriteria">
  
     {{"Name:"+customer.Name+" Age:"+customer.Age +" Location:"+customer.Location}},
   
   </li>
  </ul>
 </div>
</body>
</html>

7controller.js :
var app=angular.module('myapp',[]);
app.controller('mycontroller',function($scope,$http){
 $http.get('http://localhost:8080/7data.json')
 .success(function(response)
 {
  $scope.customerdata=response.customers;
 }
 );
}
);

Output :

Angular JS Tutorial6: Login page using routeScope,check,resolve,location

We can control login/authorization using routeScope,check,resolve,location.

Example :

6.html :

<!DOCTYPE html>
<html lang="en">
<head>
 <title>routeScope,check,resolve,location</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="angular-route.js"></script>
 <script src="6controller.js"></script>
</head>
<body  ng-app="myapp">
 <div ng-view></div>
</body>
</html>

6controller.js :

var app=angular.module('myapp',['ngRoute']);
app.config(function($routeProvider){
 $routeProvider
 .when('/',{
  templateUrl:'6login.html',
  //template:'Loaded from /'
 })
 .when('/dashboard',{
  resolve:{
   "check":function($location,$rootScope){
    if(!$rootScope.loggedIn)
    {
     $location.path('/');
    }
   }
  },
  templateUrl:'6dashboard.html'
 })
 .otherwise({
  redirectTo:'/'
 });
});
app.controller('loginCtrl',function($scope,$location,$rootScope){
 $scope.submit=function(){
 

  if($scope.username=='Admin' && $scope.password=='Admin'){
   $rootScope.loggedIn=true;
  
   $location.path('/dashboard');
  }
  else{
   alert('wrong credential');
  }
 };
});

6login.html :

<div ng-controller="loginCtrl">
 <form action="/" id="myloginform">
  User Name : <input type="text" ng-model="username" id="username"/><br/>
  Password : <input type="password" ng-model="password" id="password"/>
  <button type="button" ng-click="submit()">Login</button>
 </form>
</div>

6dashboard.html :

Welcome to Dashboard

Angular JS Tutorial5: ngroute

The ngRoute module provides routing for angular apps.

We can download angular-route.js from the below location
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
where x.y.z indicates the version on angular-route.js like 1.3.5

Example :

5.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>ngRoute</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="angular-route.js"></script>
 <script src="5controller.js"></script>
</head>
<body  ng-app="myapp">
 <div ng-view></div>
</body>
</html>

5controller.js :

var app=angular.module('myapp',['ngRoute']);
app.config(function($routeProvider){
 $routeProvider
 .when('/',{
  templateUrl:'5a.html',
  //template:'Loaded from /'
 })
 .when('/fiveb',{
  templateUrl:'5b.html'
 })
 .when('/fivec',{
  templateUrl:'5c.html'
 })
 .otherwise({
  redirectTo:'/'
 });
});

5a.html:
I am in 5a<a href="#/fiveb">Open fiveb</a>

5b.html:
I am in 5b

5c.html:

<a href="#/fiveb">Open fiveb</a>I am in 5c

Angular JS Tutorial4: ng-include

ng-include fetches, compiles and includes an external HTML fragment.

Example:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
 <title>ng-includes</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
 <div ng-include="'4a.html'"></div> <!-- Need localhost to test this example -->
</body>
</html>

Angular JS Tutorial3: ng-controller,filter

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:

•Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.

•View — The template (HTML with data bindings) that is rendered into the View.

•Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

Filter selects a subset of items from array and returns it as a new array.

Example :

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
 <title>ng-controller,filter</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
 <div ng-controller="mycontroller">
  {{mylanguage|uppercase}}
  <button ng-click=changelang()>Change Language to Bengali</button>
 </div>

 <script type="text/javascript">
  var application=angular.module('myapp',[]);//[] : use for referring other module
  application.controller('mycontroller',function($scope)
  {
   $scope.mylanguage='English';
   $scope.changelang=function(){
    $scope.mylanguage='Bengali';
   }
  }
  );
 </script>
</body>
</html>

Output:

Angular JS Tutorial2: ng-init,ng-repeat,sharedscope

The ng-init directive initializes application data.

The ngRepeat directive instantiates a template once per item from a collection.

In order to share data between scopes by model, use the model property like samplemode.sampledata

Example :

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
 <title>ng-init,ng-repeat,sharedscope</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
 <div ng-init="menu='chicken';
 places=[
 {country:'UK',city:'Southampton'},
 {country:'Europe',city:'Paris'},
 {country:'India',city:'Kolkata'},
 ]">
  <input type="text" ng-model="menu"/>
 </div>
<br/>
Share the data between this textbox and textboxes inside the country:city loop use the property like 'message.sharescope'<br/>
Otherwise it will be unidirectional binding from outer ti inner loop, when you use only 'message'<br/>
<input type="text" ng-model="message.sharescope"/><!--to share data between scope, use the property like 'message.sharescope' inplace of 'message', else innser scope value will not be passed to outer scope-->
<p ng-repeat="place in places">
 {{place.country}} :{{place.city}}
 <input type="text" ng-model="message.sharescope">
 <br/>
</p>
</body>
</html>

Output

Angular JS Tutorial1: ng-model,ng-bind and Expression

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Typically, we don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

Example:

Before staring Angular Expression, create the web server using node.js with the below file

1)Package.json:

{
  "name": "angulardetails",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies" : {
    "connect"         : "*",
    "serve-static"    : "*"
 
  }
}

2)index.js

var connect=require("connect");
var serveStatic=require("serve-static");

var app=connect()
.use(serveStatic('public'))
.use(function  (req,res) {
res.end("Welcome to the Static Demo");
})
.listen(8080);

console.log("listening from port 8080");

3)Create a public folder in the root.

4)run npm install to install dependencies

5)run using 'node index.js'

Now create angular.js file "1.html" with in the public folder

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<title>ng-model,ng-bind,Expression</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
Info: ng-model works on input, ng-bind on div<br/>
<input type="text" ng-model="name"/>
<div >Hello {{name}}</div>

Hello <div ng-bind="name"></div>
<div data-ng-bind="name"></div>
<div ng:bind="name"></div>
<div ng_bind="name"></div>
<div >Expression {{10*12}}</div>
</body>
</html>


See your angular js file in browser by typing the URL "http://localhost:8080/1.html"