Using Angular Universal with Sql Server

  • export const realDataBase = { get() { return friendsQuery(); } }; function friendsQuery() { return new Promise(function(resolve, reject){ var Connection = require(‘tedious’).Connection; var result = []; var config = { userName: ‘userName’, password: ‘password’, server: ‘some-server’ }; var connection = new Connection(config); connection.on(‘connect’, function(err) { if (err) { console.log(err); } getFriends(); }); var Request = require(‘tedious’).
  • Friends

    Id
    First Name
    LastName

    {{friend.
  • I simply swapped out the hard coded return value for the results of a sql query.
  • If you want to run this against your own database, just fill in the config object with your credentials and define a sql query.
  • In the post I will show how to use Angular Universal with Sql Server.


For the purposes of this post I have cloned the universal-starter, but replaced the simulated database with a real sql server database.


@xtools_at: Using Angular Universal with Sql Server #angularjs #webdev

For the purposes of this post I have cloned the universal-starter, but replaced the simulated database with a real sql server database.

You can find my modified clone of the starter here.

The UI in the starter is already great, so most of my code changes involve adding a framework called Tedious to integrate node with sql-server.

The only other change is adding a table to display the result from my sql-server query.

I converted the UI to display a list of friends from my sql-server as seen below:

The starter project was already wired up with a promise against a simulated database. I simply swapped out the hard coded return value for the results of a sql query.

In the code below I am using the Tedious api to connect to the database and execute the query.

If you want to run this against your own database, just fill in the config object with your credentials and define a sql query.

export const realDataBase = { get() { return friendsQuery(); } }; function friendsQuery() { return new Promise(function(resolve, reject){ var Connection = require(‘tedious’).Connection; var result = []; var config = { userName: ‘userName’, password: ‘password’, server: ‘some-server’ }; var connection = new Connection(config); connection.on(‘connect’, function(err) { if (err) { console.log(err); } getFriends(); }); var Request = require(‘tedious’).Request; function getFriends() { var request = new Request(`use your-database SELECT Id, FirstName, LastName FROM Friend`, function(err, rowCount) { if (err) { reject(err); } connection.close(); }); request.on(‘doneProc’, function(rowCount, more) { resolve(result); }); request.on(‘row’, function(columns) { let row = {}; columns.forEach(function(column) { row[column.metadata.colName] = column.value; }); result.push(row); }); connection.execSql(request); } }); }

All my database changes can be found in db.ts.

Next I made a tweak in home.component.ts to display the query result in table format:

Friends

Id
First Name
LastName

{{friend.Id}}
{{friend.FirstName}}
{{friend.LastName}}

There you have it!

Angular Universal with Sql Integration.

If you liked this article, share it with your friends. I also invite you to follow me on twitter at @helgevold

Using Angular Universal with Sql Server