Creating A Guid Using AngularJS And NodeJS

We have been using a GUID as s primary key in our tables since quite some time now. As a C# developer, we have had the option to create a GUID using the below code, 

string newGuid = Guid.NewGuid();

We would be using the angular js package angular-guid to create a guid at the client side itself. I would be using the project that I created for my another article titled.

• Deploying NodeJS On Heroku

request you to have a look. 

 

In this article, we are going to use Bower package manager to get the required files. In order to do that we would have to get Bower first.

 

Step 1

We need to have a bower file in our project. In order to get that, open Command Promt at the project directory location and use the command bower init. This will create a bower file in your project with the required details.

 

It will ask us for certain details, providing which the file content is created.

 

Step 2

Install angular in the project by using the command : bower install angular. This will create a folder in the project by the name bower_components and another folder inside it by the name angular, which will contains all the files.

 

Step 3

Install the package for GUID creation. This package name is angular-guid. We can install it using the code bower install angular-guid -save. This will create another folder inside the bower_component by the name angular-guid, which will contain all the concerned files.

 

Step 4

Now add another js file to our project, which contains details regarding the angular app and angular controller. 

var app = angular.module('myApp',['ngGuid']);
app.controller('mainCtrl', ['$scope','Guid', function($scope, Guid){

$scope.add=function(){
alert('New Guid: ' + Guid.newGuid());
    alert('Empty Guid: ' + Guid.empty);
};
}])

Please note the add() function which calls a function Guid.newGuid() which creates a new guid value and displays it as alert. 

 

Step 5

Let's now include the three js files to our project: guid.js, angular.js and myApp.js to the layout.jade file. 

script(src='../bower_components/angular/angular.js')
script(src='../bower_components/angular-guid/guid.js')
script(src='../myApp.js')

Step 6 Let's run the application and see the result and click the Add Button. 

 

There we are, with the new Guid in the alert popup.

 

I am attaching the project to it. In case of any doubts, please feel free to ask.