Creating A Guid Using AngularJS And NodeJS

In this article, we are going to learn to create a GUID at client side 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, 
  1. 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.
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. 
  1. var app = angular.module('myApp',['ngGuid']);  
  2. app.controller('mainCtrl', ['$scope','Guid'function($scope, Guid){  
  3.   
  4. $scope.add=function(){  
  5. alert('New Guid: ' + Guid.newGuid());  
  6.     alert('Empty Guid: ' + Guid.empty);  
  7. };  
  8. }])  
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. 
  1. script(src='../bower_components/angular/angular.js')  
  2. script(src='../bower_components/angular-guid/guid.js')  
  3. 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.