In this article, I will tell you about how to Create Signup and Login Page with AngularJS. Here is the design:

Html code For Signup
This code in use a angularjs and bootstrap
<div class="form-horizontal" id="singup" name="myForm" ng-show="Registration" ng-hide="true"> 
<p style="margin-left: 185px; font-size: 200%; font-weight: bold"> 
New User Registration</p> 
<div class="form-group" style="margin-top: 30px"> 
<label class="col-sm-3 control-label"> 
Enter UserName</label> 
<div class="col-sm-4"> 
    <input type="text" id="uname" name="uname" ng-model="uname" placeholder="User Name" 
class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Address</label> 
<div class="col-sm-4"> 
    <textarea ng-model="add" name="add" id="add" class="form-control" placeholder="Enter Address"></textarea> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Phone Number</label> 
<div class="col-sm-4"> 
    <input type="text" ng-model="phone" id="phone" placeholder="Phone Number" class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Education</label> 
<div class="col-sm-4"> 
    <select ng-model="edu" id="edus"> 
Select 
        <option value="BCA">BCA</option> 
        <option value="BBA">BBA</option> 
        <option value="BCOM">BCOM</option> 
        <option value="MCA">MCA</option> 
        <option value="MBA">MBA</option> 
        <option value="MCOM">MCOM</option> 
    </select> 
    <br /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
Gender</label> 
<div class="col-sm-4"> 
    <input type="radio" name="gender" ng-model="age" value="Male" /> 
Male 
    <input type="radio" name="gender" ng-model="age" value="Female" /> 
Female 
    <br /> 
    <tt id="gen" ng-hide="true">{{age | json}}</tt> 
    <br /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Password</label> 
<div class="col-sm-4"> 
    <input type="password" ng-model="pass" id="pass" placeholder="Enter Password" class="form-control" /> 
</div> 
</div> 
<div class="form-group" ng-show="edit5" ng-hide="false"> 
<label class="col-sm-3 control-label"> 
Re-Password</label> 
<div class="col-sm-4"> 
    <input type="password" ng-model="repass" id="repass" placeholder="ReEnter Password" 
class="form-control" /> 
</div> 
</div> 
<button type="button" class="btn btn-primary btn-lg" ng-click="saveUser()" style="margin-left: 150px;"> 
<span class="glyphicon glyphicon-save"></span>Registration 

</button> 
<button type="button" id="cbtn" class="btn btn-danger btn-lg" ng-click="cancel_r()"> 
Cancel  
<span class="glyphicon glyphicon-off"></span> 
</button> 
<br /> 
<br /> 
<br /> 
</div>

Here is the ASP.NET code for Signup. You should save data using webMethod:
<Services.WebMethod()> 
Public Shared Function SaveUser(ByVal uname As String, ByVal add As String, ByVal phone As String, ByVal edu As String, ByVal age As String, ByVal pass As String, ByVal repass As String) As String 
'Insert 
Dim Users As New StrategicAlliance2.User3 
Dim UsersDit1 As New StrategicAlliance2.UserRegistrationObject 
'Users.GetUserDetailsByID(id) 
UsersDit1.Username = uname 
UsersDit1.Address = add 
UsersDit1.Phone_No = phone 
UsersDit1.Education = edu 
UsersDit1.Gender = age 
UsersDit1.Password = pass 
UsersDit1.Re_Password = repass 
Users.InsertUserDetails(UsersDit1) 
End Function


The following Js Code is for Signup. The below code for saveUser Butoon click:
$scope.saveUser = function()  

strErrorMsg = ""; 
notEmpty(document.getElementById('uname'), '-Enter your UserName.'); 
notEmpty(document.getElementById('add'), '-Enter your Address'); 
notEmpty(document.getElementById('phone'), '-Enter your Phone Number'); 
notEmpty(document.getElementById('pass'), '-Enter Password'); 
notEmpty(document.getElementById('edus'), '-Enter Education'); 
notEmpty(document.getElementById('repass'), '-Enter Re-Password'); 
ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number'); 
checkPass(document.getElementById('repass'), '-Password Not Match') 
if (strErrorMsg == '') 

$.ajax({ 
    type: "POST", 
    url: "UserLogin.aspx/SaveUser", 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify({ 
        uname: $scope.uname, 
        fName: $scope.fName, 
        add: $scope.add, 
        phone: $scope.phone, 
        edu: $scope.edu, 
        age: $scope.age, 
        pass: $scope.pass, 
        repass: $scope.repass 
    }), 
    success: function(data)  
    { 
        alert("Registration Success"); 
        // window.location.href = "UserLogin.aspx"; 
        $scope.login = true; 
        $scope.Registration = false; 
        $scope.$apply(); 
    } 

}); 

}; 


Now, it's time to create Login Page
Html Code for Login. The following code in use a Angularjs & Bootstrap
<div class="form-horizontal" ng-show="login" ng-hide="false"><%--  
<a class="btn btn-info btn-lg" ng-click="UserR()" style="margin-left: 375px;"> 
    <span 
class="glyphicon glyphicon-user"></span>User Registration  
</a>--%> 
<h1 class="form-signin-heading text-muted" style="margin-top: 10px"> 
Sign In</h1> 
<div class="form-group" style="margin-top: 30px"> 
    <label class="col-sm-2 control-label"> 
User Name:</label> 
    <div class="col-sm-2"> 
        <input type="text" class="form-control" id="login_User" name="login_User" ng-model="login_User" 
placeholder="User Name" autofocus="" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-2 control-label"> 
Password:</label> 
    <div class="col-sm-2"> 
        <input type="password" class="form-control" id="login_Pass" name="login_Pass" ng-model="login_Pass" 
placeholder="Password" /> 
    </div> 
</div> 
<button type="button" class="btn btn-primary" ng-click="Login()" style="margin-left: 200px;"> 
    <span class="glyphicon glyphicon-log-in"></span>Sign In 

</button> 
<button type="button" class="btn btn-danger" ng-click="cancel()"> 
    <span class="glyphicon glyphicon-cancel"></span>Cancel 

</button> 
<br /> 
<a href="" style="font-size: 20px; color: Red; margin-left: 135px; margin-top: 20px" 
ng-click="UserR()">If you are not Registered Then click here </a> 
<br /> 
<p style="font-size: 20px; color: Blue; margin-left: 180px; margin-top: 10px"> 
One account is all you need 
</p> 
<p style="font-size: 16px; color: Black; margin-left: 90px;"> 
A single username and password gets you into everything Google. 
</p> 
<img style="margin-left: 75px" src="Images/logo_strip_sign_up_2x.png" height="50px" 
width="350px" /> 
</div> 


Code for Login with ASP.NET
The below code is to fatch data from database using webmethod and match with the entered data.
< Services.WebMethod() > Public Shared Function UserLogin() As StrategicAlliance2.UserRegistrationObject() 
Dim Users As New StrategicAlliance2.User3 
Dim details As New List(Of StrategicAlliance2.UserRegistrationObject) 
For Each dtrow As DataRow In Users.GetTableOfUserDetails.Rows 
Dim user As New StrategicAlliance2.UserRegistrationObject 
user.Username = dtrow("Username").ToString() 
user.Password = dtrow("password").ToString() 
details.Add(user) 
Next 
Return details.ToArray() 
End Function 


Js Code for Login
In this code in login button and cancel button
$scope.Login = function()  

strErrorMsg = ""; 
notEmpty(document.getElementById('login_User'), '-Enter your UserName.'); 
notEmpty(document.getElementById('login_Pass'), '-Enter your Password'); 
if (strErrorMsg == '')  

$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "UserLogin.aspx/UserLogin", 
data: "{}", 
dataType: "json", 
success: function(data)  

    for (var i = 0; i < data.d.length; i++)  
    { 
        User = data.d[i].Username; 
        Password = data.d[i].Password; 
        a = (User); 
        b = (Password); 
        if ($scope.login_User == a && $scope.login_Pass == b) { 
            window.location.href = "Default.aspx"; 
        } 
    } 
    if ($scope.login_Pass != b)  
    { 
        alert("Enter Valid ID And Password"); 
        $scope.login_User = ''; 
        $scope.login_Pass = ''; 
        $scope.$apply(); 
    } 

}); 

if (strErrorMsg != '') 

alert('\n' + strErrorMsg); 
} else  


}; 
$scope.cancel = function()  

$scope.login_User = ''; 
$scope.login_Pass = ''; 
}; 

HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.