Sign Up , Registration form Using AngularJs

Sign up form using Angular Js and C#.net Web services (asmx file). Firstly create a sign up form  in html5 .Secondly use  angularJS framework. Then Call web services on button Event.

Pass all value  of textbox into dataObject .
ANGULAR JS SCRIPT
angular.module("myapp",[]).controller("MyController",function($scope,$http)
{
$scope.myForm={};
$scope.myForm.name="";
$scope.myForm.email="";
$scope.myForm.phone="";
$scope.myForm.pass="";
$scope.myForm.add="";
$scope.myForm.city="";
$scope.myForm.submitTheForm=function(item,event)
{
console.log("--> Submitting form");
var dataObject={
name:$scope.myForm.name,
email:$scope.myForm.email,
phone:$scope.myForm.phone,
password:$scope.myForm.pass,
address:$scope.myForm.add,
city:$scope.myForm.city};
var responsePromise=$http.post("WebService2.asmx/Helloworld2",dataObject,{});
responsePromise.success(function(data,status,headers,config)
{
var data2=data.replace(/{"d":null}/g,'');
var myjson=JSON.parse(data2);
$scope.questions=JSON.parse(myjson);
});
responsePromise.error(function(data,status,headers,config)
{
alert("Submitting form failed!");
});
}});
ANGULAR JS WITH BOOTSTRAP
Complete HTML5 , CSS3 , bootstrap and AngularJS code
 <!DOCTYPE html> 
<html ng-app=myapp>
<head>
<title>consume JSON web service</title>
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller=MyController>
<form> <div class=container>
<div class=row> <div class=col-md-6>
<input id=name ng-model=myForm.name ng-minlength=5 ng-maxlength=12 class=form-control> Name <br/>
<input id=email ng-model=myForm.email ng-minlength=5 ng-maxlength=12 class=form-control> Email <br/>
<input id=phone ng-model=myForm.phone ng-minlength=5 ng-maxlength=12 class=form-control> Phone <br/>
<input id=password ng-model=myForm.pass ng-minlength=5 ng-maxlength=12 class=form-control> password <br/>
<input id=address ng-model=myForm.add ng-minlength=5 ng-maxlength=12 class=form-control> Address <br/>
<input id=city ng-model=myForm.city ng-minlength=5 ng-maxlength=12 class=form-control> City <br/>
<button ng-click="myForm.submitTheForm()">Submit Form</button> </div> </div> </div>
</form> <table> <tr ng-repeat="i in questions | filter:search"> <td> {{i.success}} </td> <td> </td> </tr> </table>
</div>
<script>angular.module("myapp",[]).controller("MyController",function($scope,$http)
{$scope.myForm={}
;$scope.myForm.name="";
$scope.myForm.email="";
$scope.myForm.phone="";
$scope.myForm.pass="";
$scope.myForm.add="";
$scope.myForm.city="";
$scope.myForm.submitTheForm=function(item,event)
{console.log("--> Submitting form");
var dataObject={
name:$scope.myForm.name,
email:$scope.myForm.email,
phone:$scope.myForm.phone,
password:$scope.myForm.pass,
address:$scope.myForm.add,
city:$scope.myForm.city};
var responsePromise=$http.post("WebService2.asmx/Helloworld2",dataObject,{});
responsePromise.success(function(data,status,headers,config)
{
var data2=data.replace(/{"d":null}/g,'');
var myjson=JSON.parse(data2);$scope.questions=JSON.parse(myjson);});
responsePromise.error(function(data,status,headers,config){alert(data);
alert("Submitting form failed!");});
}});</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Share on facebook Google Twitter

Web Engineers here !


Grideb is the group of engineers who provide excellent solution for domain scenario with experienced, talented and high skilled engineers. We work hard to reduce complication of user interface and improve better quality of service.

-- Chief Executive Officer, GRIDEB SERVICES


www.grideb.com

Contact Us

GRIDEB SERVICES
Office-1,FF ,One Square Office Mall
Shaktikhand-III,Indirapuram,Ghaziabad
Uttar Pradesh 201004 (INDIA)
P: +91 (120) 260-6044
M: +91 90-1300-3421
Email ID
info@grideb.com




Grideb Services 2013-2014