SHASHANGKA SHEKHAR'S BLOG

Author, TechWriter

Learn About MEAN Stack

Hits: 4

MongoDB, Express, AngularJS, Node.js abbreviated as MEAN, these are development pack by all Javascript. In this sample we are going to use MSSQL Server instead of MongoDb.

With this application sample we can create a new user, show all the user, modify user data & also can able to delete the user through API build with Express from frontend using AngularJS.

Components:

  • MSSql – SQL database
  • Express – NodeJS Framework
  • Angular – JavaScript frameworks for Frontend
  • NodeJS – JavaScript Execution environment (Server)

Dependencies: It’s highly recommended to review those previous post to follow this post.

Let’s create a database in MSSql server for user data storing which is going to operate by our application. After creating the db execute the below query by using that db.

This will create a new table named “user”. After that we need to create some stored procedure for SQL operation, copy below script and execute those by pasting it in MSSql query window.

We are done with the database work, let’s start with application development plan. From our previous sample of application we are going to start.

Download it from GitHub, then open the application using Visual Studio 2017. We need to install two more packages to fulfill our requirements.

  • mssql – Microsoft SQL Server client for Node.js
  • body-parser – Node.js body parsing middleware

Server-Side

 Installation: Right click on project Go to > Open Command Prompt Here.

Run this command for mssql

Run this command for body-parser

After completing those installation we need to add those to our node server. Here we have added by enabling

then we have use

operations are going to perform through API’s using Express route. Let’s get started with creating API’s process.

API’s:

Let’s create data service to perform the operations in database. Add a common dbService.js file to serve the requests like below image.

Open the newly added js file then add this line.

This mean we are requiring mssql module by require() function to load the source code in a new function.

After that we are adding the database server connection configuration

As we can see the max pool is 10 & min is 0 & timeout in milliseconds before closing an unused connection which is default.

Get more details on Pool: https://github.com/coopernurse/node-pool

Connections

we are creating a sql connection object using connectionpool

Request

then we are executing the request using the global connection pool.

Get more details on connection: https://www.npmjs.com/package/mssql#connections-1

Finally we are exporting the module for another module call.

Let’s create a specific data service using Express router. Create a new JS file then add those code snippet below to newly added file.

After finishing all those we need to enable by app.use() function in the node server as middleware.

also we are giving access to other user agent by enabling Cross-Origin Resource Sharing (CORS).

Finally this is the overview of Node Server

Client-Side

We need to create user interface to operate data in database. First we need create folder for specific module like below.

As you can see we have created an angularJs controller with html page.

Html View

This view is going to render while the routing state is changed.

AngularJS Controller

In our angularJS controller we have use $http service to communicate with the API’s. Mehodts that used:

  • $http.get: get data
  • $http.post: post new data
  • $http.put: update existing data
  • $http.delete: delete existing data

More about $http service here

Publishing the App: Let’s go to gulp modification to get publish files finally.

Go to task explorer in Visual Studio like below image

Run the task, this will copy all our application file to published folder.

Go to Publish folder

Open command prompt here (Shift + Right Mouse) then type “nodemon”. We are starting our application using nodemon. If we have any change in our application nodemon will automatically restart the application.

Now open browser type the URL: http://localhost:3000

 OutPut:

 Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help J

Post a comment