MSSQL CRUD RESTful ANGULARJS app - Part 1

This tutorial is focused on the development of a CRUD & RESTful  web application with MSSQL and ANGULAR-JS. 
Part 1 - The user interface

Node.js is a very cool platform to seriously consider our enterprise projects.

I have tried a lot of libraries to find an optimal setup to develop an enterprise application. This tutorial will guide you in the implementation of a strong and easily reusable platform.


[ Part 1 ] [ Part 2 ] [ Part 3 ] [ Part 4 ]

Technologies

Choosing a DB

The first requirement that I have considered is the use of a relational database. A large part of enterprise data are normally stored in a relational database, I think that it's better to interact with it directly. I have choosen Microsoft Sql Server that is one of the most used DB (see also Gartner Quadrant). I appreciate a lot Mongo Db and I prefer it for a classic web site but, for an enterprise application, I prefer MSSQL. The next release of MSSQL-2016 will contain a native JSON implementation. This will simplify the usage with NodeJs, maintaining the advantages of stored procedures, powerful views, scheduler, SSIS and all the other tools and facilities available.

Choosing a UI platform

There are a lot of libraries that help the development of UI. One of the platform most used is AngularJs. It aims to simplify the development and the testing by providing a framework for client side MVM (Model View Control) and MVVM (Model-View-ViewModel) architecture. With angular we can develop a SPA (single page application) in a few minutes.

Choosing a Software Architecture Style

A lot of software engineering now use a CRUD & RESTful approach when they implements a new NodeJs application. This approach has a lot of advantages also if it is not so "instinctive" for traditional developers. This tutorial will guide you to write an application with a complete isolation between the web service and the data layer. I prefer to separate these two distinct layers because so  I can choose different components for the http server and also to enforce security. It's possible to assign these layer to a two different and specialized hosts; they may reside also in different geographical sites with a lot of vantages in deployment flexibility and security assurance.

User Interface: start from a good template

I've googled a lot the web to find a single tutorial with these requirements, but is not easy to find it. So I have selected two separate examples as the base of this tutorial.

The better AngularJs template that I have found is Movie App. It implements the MVM/MVVM components in a clear code and everything is described in a detailed tutorial (thanks to Sandeep for his job). We start from downloading it here:
create a folder MyApp in your work space
download the MovieApp from github, decompress it  and put the folder MovieApp inside MyApp
rename "MovieApp" as "public"

Now we need a web-server to play it in our local host. Express can help us to write a web server with five rows of code:
with the console, go inside MyApp and install express typing : 

node install express

with a text editor  edit:

• var express = require('express')  , app = express();
• app.use('/', express.static(_dirname + '/public'));
• app.listen(8080, function(){
•   console.log('web server listening on port 8080');
• });

save it as WebServer.js inside the folder MyApp

Our web server let the content of public folder to be available as static content.  It's time to play it:

launch our web server with the prompt command: 

node WebServer.js

. If you like to see a debug window of the web server, you can launch the webserver with:  

set DEBUG=express:* & node WebServer.js

 (using windows) or 

DEBUG=express:* node WebServer.js

 (using linux).
open Chrome and go the page: http://127.0.0.1:8080

We can see that the page is displayed, but no films are shown. In chrome select Tools > Developer Tools. We can see that an error is occurred. Why? It's simple: the CRUD application consumes a data service, but the address is wrong. No problem. Edit the file services.js (it's in the js folder) and change the address of rest service:

change fifth row with:

•     return $resource('http://movieapp-sitepointdemos.rhcloud.com/api/movies/:id',{id:'@_id'},{

The code is changed in:

Evidently the demo address is changed! Now try again and you can see that the app is ok.

Read the tutorial  "Creating a CRUD App in Minutes with Angular’s $resource" to enhance your skill in: Angular Js, rest app, spa, $resource; it's the best tutorial that i've found on the web.

We have installed a good example of a CRUD, RESTful and SPA application in our host and we have adapted it to consume a data service from an external demo site on the Internet. In the next post we will see how to provide the data layer with a local and isolated service.

[ Part 1 ] [ Part 2 ] [ Part 3 ] [ Part 4 ]