Tutorial 2 - Introduction to working with Database in Nooljs: Getting data from SQL Server.
Nooljs is great framework to develop data driven application, which gets the data from relational databases or NoSql databases and displays in web page, with minimum coding. You don't need to worry about data retrieval process or how to transmitting data to client site. All these complex processes will be handled by NoolJs framework automatically.
The Server side of framework runs top of the nodejs and various database connectors for the databases Ms-sql server, Mongodb, Postgresql, and Mysql.
The communication layer is handle by socket-io and express-js.
The client side of framework is powered by Angular-js.
In this tutorial, we will show you how to get the data from SqlServer then display into webpage.
- If you don't have SQL server installed in your computer, you can download SQLExpress from https://www.microsoft.com/en-us/download/details.aspx?id=52679 for free.
- Create table Users and insert some records
Now, we have setup table and data into Sqlserver database.create table users (userid int identity(1,1), firstName varchar(100), lastName varchar(100), userName varchar(100) ) insert into users(firstName, lastName, userName) values('Jone', 'King', 'johnKing') insert into users(firstName, lastName, userName) values('Jane', 'Paul', 'janepaul') insert into users(firstName, lastName, userName) values('Steve', 'Peter', 'stevepeter') insert into users(firstName, lastName, userName) values('Ann', 'Mark', 'annmark') select * from users - Install nooljs with npm
npm install nooljs -g - Create new nooljs project by running command
It will ask project name. Enter the project name( example Tutorials2Sqldata). It will create new folder for the project and sample application.nooljs - Go the new project folder
cd Tutorials2Sqldata - Update the npm dependency packages
npm update - Go to the layout folder under this project, create new file called "users-template.html" . Then, open this file with your favorite editor(example notepad++) .
<nl-template id="user-template" nl-parent="main-content" > <h1>Users</h1> <table nl-db-data="select userName, firstName, lastName from Users" nl-db-model="users"> <tr> <td>User Name </td><td>First Name</td><td>Last Name</td></tr> <tr ng-repeat="x in users"> <td>{{x.userName}}</td><td>{{x.firstName}}</td><td>{{x.lastName}}</td> </tr> </table> </nl-template> - Open The file index.html add "user-template as default nl-default-template.
<html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link rel="stylesheet" href="http://code.ionicframework.com/1.3.1/css/ionic.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script> <script src="https://cdn.socket.io/socket.io-1.3.7.js"> </script> <script src="js/nooljsClient.js"> <script src="js/client.js"> </script> </head> <body > <div id="top-content" nl-default-template="user-template"> </div> </body> </html> - Open the file config >> connection.json. Enter Sql server connection information under config section.
[ { "name":"sqlConn", "type":"sqlserver", "config":{"server": "localhost", "user": "admin", "password": "test123", "database": "userdb" } }, ............. - Open the file config >> config.json. Add sqlConn as default Connection.
{"userid" : "UserId", "sessionTimeoutMinutes":60, "logout":"login", "defaultConnection": "sqlConn", "permission": { "connection":"jsonFile", "query" : "config/permision.json", "errorMessage": " You do not have permission to view this session." } } -
Open the browser and go to localhost:8080 . You will see all the users in the screen.
For the full documentation go to the http://nooljs.github.io/nooljs/ or download from https://www.npmjs.com/package/nooljs
