Simple Web Application With Node JS and Angular JS

Today, my tutorial is more related to practical than theoretical. I going to show you how to develop simple application using angular JS and Node JS with Rest Api.
In this project, I will store some details of a car in Node JS variable and using rest api, I will show that data in a web browser. I use JSON objects for retrieving data form server to client. This is the summary of my tasks.
  • Implement NodeJS application in server side
  • Store details of car (carName: Nissan 370z, makeYear:2015, topSpeed: 155 mph) in nodeJS variable.
  • Implement simple web interface with HTML. It contain 3 text boxes to display details of car. and a button to request information from server.
  • Implement Angular JS in Client side to retrieve infromation from server.
 Lets start with server side nodeJS. I will use Jetbrains WebStorm IDE to implement this app.
First create a blank project. I will create a Project Named "Simple NodeJS Angular JS". Then add a javascript file named server.js to project. Then in terminal (cmd), type: 
               npm init 
to initiate package manager and make package.json. It will ask some user inputs. We can give them and package.json will be create.

To do rest part, We need to use Express JS library. To import that, Type
               npm install express --save

As we send data using JSON, we need another library named body-parser. Like above,Type:
               npm install body-parser --save

Now we can start our coding.
Here we will import libraries into our project.








Next create variable to store our data.
Now set route to respond client. We will set default route to accept connection. And set to listen to 3005 port. So we can call server by localhost:3005




Full server code is looks like this,



Now create new directory in project names public to store client side things. Then add html file named index to show in browser. Now import angular.js to index.html using <script src>. Here downloaded angular.js file into my project. But if you want, you can use CDN instead.

Then make new javascript file named angularModule.js in public directory. It will used to define module in angular JS. And type this in that file





Then add new Javascript file named angularController.js in public directory. And type this.










Then make index.html to work with angular files.
Now, to start server, Type:
               npm start       or    node server.js 

Then go to your brower and type localhost:3005 in address bar and press enter.
It should show you a web interface. Click button getData. Then resulted page must be look like this.

This is the result of our simple web application.

I think this will help for beginners to get some idea about node js and angular js. 
Feel free to comment if you have any queries, confusions or suggestions etc regarding this. I will reply soon.

Thank you for reading this. Good Bye!!

Comments

Post a Comment

Popular posts from this blog

CSRF Defence - Synchronizer Token Pattern Demo

Image
I have wrote some theoretical background of CSRF and CSRF prevention mechanisms in previous posts. If you don't have much idea about what CSRF and how prevention mechanisms works, please go back and read them first. These are the links for them. Cross Site Request Forgery (CSRF) CSRF Defence - Synchronizer Token Pattern From here onword, I assume you have the basic idea of concept of CSRF attack and prevention mechanisms. So, lets get started. This post is fully practical based one. At them end of this, There will be fully functioning web based application to demonstrate how CSRF attack works and how to prevent it using synchronizer token pattern. So, in order to follow this, you will need to setup your development environment first. These are the technologies I used to develop this demonstration application. Technologies Java 8 Spring Boot Framework Spring Security Maven Bootstrap 4 (Optional, Just for enhance the look and feel) Integrated Development Environmen...
Read more

Introduction to docker!

Image
Well, Today I thought to bring you something different. Docker is the most popular platform in today to run applications easily. Docker helps us to deploy our applications more easily with less involvements of configurations. Main concept behind the docker is virtualization . Anyway, this is some kind of large topic and like you, I'm still learning these stuff. However I would like to share my experience on this technology with you. I hope this will help someone who willing to take the first step of the docker technology. Without further, let's dive into the docker sea !. So as I say, Lets start docker from basic. 😉 Why we need docker? The requirement of docker is started with the introduction of micro service architecture. According to the microservice architecture , we should split/divide our application into different individual services. So that, unlike 3 tier (monolithic) architecture, we have to deploy and run several services. Example system with microservic...
Read more

How to view queries executed in MySQL?

Hi all, This is a small post which I would like to share my finding with you. In one of my software project, There was a small peace of software which frequently dealing with database. (I got that clue from MySQL workbench dashboard) I was so curious about that because I wanted to know what does that do and what does it read/write from/to the database.  Finally I found a solution which helps me to find out that ! The solution was MySQL log. First you will have to enable the log. If you are using a version below 5.1.12, you will have to go to configuration level (my.cnf). But fortunately, If you are using MySQL >= 5.1.12 you can do that on the fly with MySQL global variables and does not need to restart the server as well. This is how I did (in MySQL >= 5.1.12), There are two options which can be done. Writing log to a table Writing log to a file. By default, MySQL logging is disabled, because of the performance reasons.  So we have to enable it first.   Writing log ...
Read more