Felix Kling

Felix Kling

1558166375

Single Page Application with Angular.js Node.js and CouchDB

We posted the article on Single Page Application with Angular.js, Node.js and CouchDB Cradle Module with Express 3. Current post is a way to migrate the same with Express 4.

This article describes a way to make a web application with Javascript based Web Server with CouchDB with Angular.js and Node.js.

Here we have selected

  • Angular.js for client side development – Single Page Application
  • Cross Domain Communication in between Angular.js and Node.js
  • Node.js for server side development
  • Rest based web service creation with express.js (Express 4)
  • Database – CouchDb
  • Node.js Cradle Module Extention (to make communication with CouchDB)
  • Making CouchDB views with Map-Reduce to fetch the data

We have created a Proof of Concept with Javascript based web server, where we have focused on dealing with NoSql (CouchDB) with javascript based framework Node.js and angular.js on client side.

Architecture at a glance



Steps

Installation

  • Download and install Node.js from here.
  • To Develop the application we need to install cradle module for Node.js
  • Command – **npm install cradle **(should be connected to internet)
  • We need to install express.js for node.jsCommand – npm install express (should be connected to internet)

Configuration Code

Now we will try to describe the code portion

var application_root = __dirname,
express = require("express"),
path = require("path");

Here we have initialised the express.js within javascript variables in respect of Node.js concept.

var databaseUrl = "sampledb";
var cradle = require('cradle');
var connection = new(cradle.Connection)('http://admin:admin@localhost', 5984, {
auth: { username: 'admin', password: 'admin' }
});
var db = connection.database(databaseUrl);

Here we have initialised the express web server in app variable.

var databaseUrl = "sampledb";
var cradle = require('cradle');
var connection = new(cradle.Connection)('http://admin:admin@localhost', 5984, {
auth: { username: 'admin', password: 'admin' }
});
var db = connection.database(databaseUrl);

Here we have made the connection to the couchdb database using the Node.js cradle module extension library.

// Config
var env = process.env.NODE_ENV || 'development';
if ('development' == env) {
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
var methodOverride = require('method-override');
app.use(methodOverride());
app.use(express.static(path.join(application_root, "public")));
var errorhandler = require('errorhandler');
app.use(errorhandler());
}

Here we have made the configuration related to express.js which is very much different from Express 3.

In Express 3 the same portion was written as

      app.configure(function () {
         app.use(express.bodyParser());
         app.use(express.methodOverride());
         app.use(app.router);
         app.use(express.static(path.join(application_root, "public")));
         app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
      });

This makes a little sense how the Express 3 is migrated to Express 4.

In Express 4 app.use(app.router); is removed. Instead it is added with the Rest services.The way of configuration is also changed as well as the changes reflected in use of bodyParser() ,methodOverride() ,methodOverride() ,errorHandler({…}).

Rest Services Code

app.route('/api').get(function (req, res) {
   res.header("Access-Control-Allow-Origin", "http://localhost");
   res.send('Express API is running');
});

Here we have made our first REST based web service and tested whether the express.js is running.Our sample api will be http://127.0.0.1:1212/api or http://localhost:1212/api

app.route('/getangularusers').get(function (req, res) {
 res.header("Access-Control-Allow-Origin", "http://localhost");
 res.header("Access-Control-Allow-Methods", "GET, POST");
 res.writeHead(200, {'Content-Type': 'application/json'});
 str='[';
 db.view('characters/all', function (err, response) {
    response.forEach(function (row) {
            //console.log("%s is on the %s side of the force.", row.name, row.force);
        str = str + '{ "name" : "' + row.username + '"},' +'\n';
        });
        str = str.trim();
        str = str.substring(0,str.length-1);
    str = str + ']';
    res.end( str);
 });
});

Here we have created another REST api to get all username from user collection and so we have done the cradle query.


CouchDB View Creation

This view creation is to be executed, before running the Angular Client Application to get specific set of data from couchdb.

To run this view creation, we should put

[httpd]  
authentication_handlers = {couch_httpd_auth, null_authentication_handler}  

in the local.ini file of <>/etc/couchdb folder to execute this map function without being the admin user.

So the REST api of view creation is

app.route('/createview').get(function (req, res) { // Before running the Angular Application, the view must be created
 db.save('_design/characters', { // Main View Family Name
        all: { // A particular set of data selection by javascript map-reduce
        map: function (doc) {
           if (doc.username) emit(doc.username, doc); // specific code to execute map function on each document
       }
     }
   });
});

and the sample api will be – http://127.0.0.1:1212/getangularusers (Get Method).

Next we have made a POST request to create an user via REST calling.

app.route('/insertangularcouchuser').post(function (req, res){
console.log("POST: ");
res.header("Access-Control-Allow-Origin", "http://localhost");
res.header("Access-Control-Allow-Methods", "GET, POST");
// The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross
// Domain Request
console.log(req.body);
console.log(req.body.mydata);
var jsonData = JSON.parse(req.body.mydata);
var doc = {email: jsonData.email, password: jsonData.password, username: jsonData.username};
db.save('\''+Math.random()+'\'', doc, function (err, res) {
   if (err) {
       // Handle error
       res += ' SAVE ERROR: Could not save record!!\n';
       } else {
       // Handle success
       res += ' SUCESSFUL SAVE\n';
       }
   });
});

Our sample api will be – http://127.0.0.1:1212/insertangularcouchuser (Post Method – accessed by client side)

// Launch server
app.listen(1212);

We have made the server to listen at 1212 port.

Now run node appcouchdbangular.js from command shell. This is our node.js specific code file.

For references :


Angular.js part

Below is the code in Angular Controller

'use strict';

var myApp = angular.module(‘myApp’, []); // <strong>Taking Angular Application in Javascript Variable</strong>

// <strong>Below is the code to allow cross domain request from web server through angular.js</strong>
myApp.config([‘$httpProvider’, function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[‘X-Requested-With’];
}
]);

/* Controllers */

function UserListCtrl($scope, $http, $templateCache) {

var method = ‘POST’;
var inserturl = ‘http://localhost:1212/insertangularcouchuser’;// <strong>URL where the Node.js server is running</strong>
$scope.codeStatus = “”;
$scope.save = function() {
//<strong> Preparing the Json Data from the Angular Model to send in the Server.</strong>
var formData = {
‘username’ : this.username,
‘password’ : this.password,
‘email’ : this.email
};

this.username = '';
this.password = '';
this.email = '';

var jdata = 'mydata='+JSON.stringify(formData); // &lt;strong&gt;The data is to be string.&lt;/strong&gt;

$http({ &lt;strong&gt;// Accessing the Angular $http Service to send data via REST Communication to Node Server.&lt;/strong&gt;
        method: method,
        url: inserturl,
        data:  jdata ,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        cache: $templateCache
    }).
    success(function(response) {
    console.log("success"); &lt;strong&gt;// Getting Success Response in Callback&lt;/strong&gt;
            $scope.codeStatus = response.data;
    console.log($scope.codeStatus);

    }).
    error(function(response) {
    console.log("error"); &lt;strong&gt;// Getting Error Response in Callback&lt;/strong&gt;
            $scope.codeStatus = response || "Request failed";
    console.log($scope.codeStatus);
    });
$scope.list();&lt;strong&gt;// Calling the list function in Angular Controller to show all current data in HTML&lt;/strong&gt;
    return false;

};

$scope.list = function() {
var url = ‘http://localhost:1212/getangularusers’;// <strong>URL where the Node.js server is running</strong>
$http.get(url).success(function(data) {
$scope.users = data;
});
<strong>// Accessing the Angular $http Service to get data via REST Communication from Node Server </strong>
};

$scope.list();
}

Angular Template and HTML

       <html lang=“en” ng-app=“myApp”>

We have referred the Angular Application in above code

   <body ng-controller=“UserListCtrl”>

We have referred the Angular Controller in above code

   Search: <input ng-model=“user”>
<div class=“span10”>
<!–Body content–>
<ul class=“users”>
<li ng-repeat="user in users | filter:user ">
{{user.name}}
</li>
</ul>
</div>

We have used the ng-repeat tag to take the users data model from REST communication and shown in HTML

   <form name=“myform” id=“myform1” ng-submit=“save()”>
<fieldset>
<legend>New User</legend>
<div class=“control-group”>
<center>
<input type=“text” placeholder=“User…” ng-model=“username” size=50 required/>
</center>
<center>
<input type=“text” placeholder=“Password…” ng-model=“password” size=50 required/>
</center>
<center>
<input type=“text” placeholder=“Email…” ng-model=“email” size=50 required/>
</center>
</div>
</fieldset>
<p>
<div><center><button type=“submit” >Save now…</button></center></div>
</p>
</form>

We have used the ng-submit tag to send the user data model from REST communication and sent to node server to save in CouchDB.

Reader can download the complete source-code in GitHub.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Learn More

The Complete Node.js Developer Course (3rd Edition)

Angular & NodeJS - The MEAN Stack Guide

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

Node.js: The Complete Guide to Build RESTful APIs (2018)

Angular 7 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Web Developer Bootcamp

MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS and NodeJS

Angular 7 CRUD With Node.JS API

Angular and Nodejs Integration Tutorial

Angular + WebSocket + Node.js Express = RxJS WebSocketSubject ❤️

Setting up your new Mac for MEAN Stack development

Front-end Developer Handbook 2019

Originally published on https://codequs.com

#node-js #angular-js #javascript #web-development

What is GEEK

Buddha Community

Single Page Application with Angular.js Node.js and CouchDB

Node JS Development Company| Node JS Web Developers-SISGAIN

Top organizations and start-ups hire Node.js developers from SISGAIN for their strategic software development projects in Illinois, USA. On the off chance that you are searching for a first rate innovation to assemble a constant Node.js web application development or a module, Node.js applications are the most appropriate alternative to pick. As Leading Node.js development company, we leverage our profound information on its segments and convey solutions that bring noteworthy business results. For more information email us at hello@sisgain.com

#node.js development services #hire node.js developers #node.js web application development #node.js development company #node js application

Benefits of Angular JS based Applications

AngularJS was introduced in the year 2009, by Google. AngularJS is a software framework used worldwide by developers. The entire base of this framework is open source. AngularJS has gained popularity among developers because of how it has become for them to create web applications. AngularJS helps in building apps that require less work and reduces the use of unnecessary codes. AngularJS application development is a javascript framework. AngularJS has a clear goal to make the entire process simpler, it also helps app development process and operations as much as it could. AngularJS is used for building applications that support MVC (model view controller) and SPAs (single page web apps) coding and programming structures. AngularJS has been used by some of the top companies in the world to simplify their app development process, like, Google, Paypal, Udemy, mobile site in iPad for HBO, etc. To read more click on the link.

#hire angular js developer #hire dedicated angular js developer #angular js application development #hire dedicated angular js team #hire best angular js application developer

Hire Dedicated Node.js Developers - Hire Node.js Developers

If you look at the backend technology used by today’s most popular apps there is one thing you would find common among them and that is the use of NodeJS Framework. Yes, the NodeJS framework is that effective and successful.

If you wish to have a strong backend for efficient app performance then have NodeJS at the backend.

WebClues Infotech offers different levels of experienced and expert professionals for your app development needs. So hire a dedicated NodeJS developer from WebClues Infotech with your experience requirement and expertise.

So what are you waiting for? Get your app developed with strong performance parameters from WebClues Infotech

For inquiry click here: https://www.webcluesinfotech.com/hire-nodejs-developer/

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated node.js developers #hire node.js developers #hire top dedicated node.js developers #hire node.js developers in usa & india #hire node js development company #hire the best node.js developers & programmers

Aria Barnes

Aria Barnes

1622719015

Why use Node.js for Web Development? Benefits and Examples of Apps

Front-end web development has been overwhelmed by JavaScript highlights for quite a long time. Google, Facebook, Wikipedia, and most of all online pages use JS for customer side activities. As of late, it additionally made a shift to cross-platform mobile development as a main technology in React Native, Nativescript, Apache Cordova, and other crossover devices. 

Throughout the most recent couple of years, Node.js moved to backend development as well. Designers need to utilize a similar tech stack for the whole web project without learning another language for server-side development. Node.js is a device that adjusts JS usefulness and syntax to the backend. 

What is Node.js? 

Node.js isn’t a language, or library, or system. It’s a runtime situation: commonly JavaScript needs a program to work, however Node.js makes appropriate settings for JS to run outside of the program. It’s based on a JavaScript V8 motor that can run in Chrome, different programs, or independently. 

The extent of V8 is to change JS program situated code into machine code — so JS turns into a broadly useful language and can be perceived by servers. This is one of the advantages of utilizing Node.js in web application development: it expands the usefulness of JavaScript, permitting designers to coordinate the language with APIs, different languages, and outside libraries.

What Are the Advantages of Node.js Web Application Development? 

Of late, organizations have been effectively changing from their backend tech stacks to Node.js. LinkedIn picked Node.js over Ruby on Rails since it took care of expanding responsibility better and decreased the quantity of servers by multiple times. PayPal and Netflix did something comparative, just they had a goal to change their design to microservices. We should investigate the motivations to pick Node.JS for web application development and when we are planning to hire node js developers. 

Amazing Tech Stack for Web Development 

The principal thing that makes Node.js a go-to environment for web development is its JavaScript legacy. It’s the most well known language right now with a great many free devices and a functioning local area. Node.js, because of its association with JS, immediately rose in ubiquity — presently it has in excess of 368 million downloads and a great many free tools in the bundle module. 

Alongside prevalence, Node.js additionally acquired the fundamental JS benefits: 

  • quick execution and information preparing; 
  • exceptionally reusable code; 
  • the code is not difficult to learn, compose, read, and keep up; 
  • tremendous asset library, a huge number of free aides, and a functioning local area. 

In addition, it’s a piece of a well known MEAN tech stack (the blend of MongoDB, Express.js, Angular, and Node.js — four tools that handle all vital parts of web application development). 

Designers Can Utilize JavaScript for the Whole Undertaking 

This is perhaps the most clear advantage of Node.js web application development. JavaScript is an unquestionable requirement for web development. Regardless of whether you construct a multi-page or single-page application, you need to know JS well. On the off chance that you are now OK with JavaScript, learning Node.js won’t be an issue. Grammar, fundamental usefulness, primary standards — every one of these things are comparable. 

In the event that you have JS designers in your group, it will be simpler for them to learn JS-based Node than a totally new dialect. What’s more, the front-end and back-end codebase will be basically the same, simple to peruse, and keep up — in light of the fact that they are both JS-based. 

A Quick Environment for Microservice Development 

There’s another motivation behind why Node.js got famous so rapidly. The environment suits well the idea of microservice development (spilling stone monument usefulness into handfuls or many more modest administrations). 

Microservices need to speak with one another rapidly — and Node.js is probably the quickest device in information handling. Among the fundamental Node.js benefits for programming development are its non-obstructing algorithms.

Node.js measures a few demands all at once without trusting that the first will be concluded. Many microservices can send messages to one another, and they will be gotten and addressed all the while. 

Versatile Web Application Development 

Node.js was worked in view of adaptability — its name really says it. The environment permits numerous hubs to run all the while and speak with one another. Here’s the reason Node.js adaptability is better than other web backend development arrangements. 

Node.js has a module that is liable for load adjusting for each running CPU center. This is one of numerous Node.js module benefits: you can run various hubs all at once, and the environment will naturally adjust the responsibility. 

Node.js permits even apportioning: you can part your application into various situations. You show various forms of the application to different clients, in light of their age, interests, area, language, and so on. This builds personalization and diminishes responsibility. Hub accomplishes this with kid measures — tasks that rapidly speak with one another and share a similar root. 

What’s more, Node’s non-hindering solicitation handling framework adds to fast, letting applications measure a great many solicitations. 

Control Stream Highlights

Numerous designers consider nonconcurrent to be one of the two impediments and benefits of Node.js web application development. In Node, at whatever point the capacity is executed, the code consequently sends a callback. As the quantity of capacities develops, so does the number of callbacks — and you end up in a circumstance known as the callback damnation. 

In any case, Node.js offers an exit plan. You can utilize systems that will plan capacities and sort through callbacks. Systems will associate comparable capacities consequently — so you can track down an essential component via search or in an envelope. At that point, there’s no compelling reason to look through callbacks.

 

Final Words

So, these are some of the top benefits of Nodejs in web application development. This is how Nodejs is contributing a lot to the field of web application development. 

I hope now you are totally aware of the whole process of how Nodejs is really important for your web project. If you are looking to hire a node js development company in India then I would suggest that you take a little consultancy too whenever you call. 

Good Luck!

Original Source

#node.js development company in india #node js development company #hire node js developers #hire node.js developers in india #node.js development services #node.js development

Why Choose Angular JS Development for Perfect Web Apps Development?

AngularJS is a JavaScript framework, this was developed by Google. IT is an open-source framework. AngularJS is responsible for handling all the activities and interactive elements on a web page. The main purpose of this framework is to develop applications for one single page. Angular JS highlights the testability process and the quality of codes for web pages. This is one of the main reasons why so many developers prefer this framework over others. Angular JS frameworks have been used in some of the top software development companies.The demand for AngularJS has been growing in all industries. This software system is fast and has helped solve the errors and mistakes of website projects. You can easily hire Angular JS developers team from the market or hire a freelancer for your work. Angular JS is the fastest and easiest framework of JavaScript to integrate with other frameworks. If you hire AngularJS developer you can easily make any kind of front-end website development easy. Why should you choose Angular JS for developing your web application? The main reason is that AngularJS has a lot of benefits, these will help you develop the best quality app. To read more click on the link.

#hire angular js developer #hire dedicated angular js developer #angular js application development #hire dedicated angular js team #hire best angular js application developer #website developer