In this tutorial i am going to explain about how to create a login page using Angular js in MVC 5 application. In this tutorial i used Simple form validation using angular(we will discuss about angular validation in detail in future post).And also a $http angular built in service.
$http: It is a angular JS built in service for communicating with remote servers.In Angular all communications (Request and response) between server and client are handled by services like $http.
Step 1: Create a Data table in Database
1.Here i used Local Database for Table creation (Sql Express).
2.Right click server explorer --> expand Database --> Right click on tables --> Click Add new table.
3.Create a table with following columns if you want you can add more columns.
4.Here i created following table.
Step 2: Add ADO.NET Entity Data Model
1.Right click on Models --> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next
2.Select Database --> give name for web.config.
3.Choose your Database objects(tables) and click finish.
Step 3: Add a Model Class to Solution
1.Right click Models --> Add --> Class and name it (I named it as UserModel.cs).
2.These Model objects are useful while we sending data from View to Controller.
3.We bind this Model properties with angular ngModel.(you will see in index.cshtml).
4.replace code with following code
namespace LoginUsingAngular.Models
{
public class UserModel
{
public string Email { get; set; }
public string Password { get; set; }
}
}
Step 4: Add New Action Method in HomeController to Check User Data
1.This Action Method gets data from database based on user entered data in form.and returns that data in Json format to angular Controller.
2.Add code in HomeController
getLoginData():
public ActionResult getLoginData(UserModel obj)
{
DatabaseEntities db = new DatabaseEntities();
var user = db.Users.Where(x => x.Email.Equals(obj.Email) && x.Password.Equals(obj.Password)).FirstOrDefault();
return new JsonResult {Data=user,JsonRequestBehavior=JsonRequestBehavior.AllowGet };
}
Step 5: Add angular controller for checking Login Form
1.Create angular module in Module.js file.
(function () {
var myApp = angular.module("myApp",[]);
})();
2.Now add another script file for angular controller and Factory method.
3.Right click on Scripts folder --> add LoginController.js
4.Replace code in LoginController.js file.
angular.module('myApp').controller('LoginController', function ($scope, LoginService) {
//initilize user data object
$scope.LoginData = {
Email: '',
Password:''
}
$scope.msg = "";
$scope.Submited = false;
$scope.IsLoggedIn = false;
$scope.IsFormValid = false;
//Check whether the form is valid or not using $watch
$scope.$watch("myForm.$valid", function (TrueOrFalse) {
$scope.IsFormValid = TrueOrFalse; //returns true if form valid
});
$scope.LoginForm = function () {
$scope.Submited = true;
if ($scope.IsFormValid) {
LoginService.getUserDetails($scope.UserModel).then(function (d) {
debugger;
if (d.data.Email != null) {
debugger;
$scope.IsLoggedIn = true;
$scope.msg = "You successfully Loggedin Mr/Ms " +d.data.FullName;
}
else {
alert("Invalid credentials buddy! try again");
}
});
}
}
})
.factory("LoginService", function ($http) {
//initilize factory object.
var fact = {};
fact.getUserDetails = function (d) {
debugger;
return $http({
url: '/Home/getLoginData',
method: 'POST',
data:JSON.stringify(d),
headers: { 'content-type': 'application/json' }
});
};
return fact;
});
4.Here,I validated form using $watch in above code.
5.I created a angular service LoginService that gets data from server controller (from HomeController.getLoginData() action).
6.LoginForm() method is initiated when user submits form using ngSubmit as angular attribute.
Step 6: Add View to display Login Form
1.Right click on Index action --> Add View --> add
2.Replace Index.cshtml view code with following code
@{
ViewBag.Title = "Login Using Angular";
}
<h2>Login Using Angular</h2>
<div ng-controller="LoginController">
<form name="myForm" novalidate ng-submit="LoginForm()">
<div style="color:green">{{msg}}</div>
<table ng-show="!IsLoggedIn" class="table table-horizontal">
<tr>
<td>Email/UserName :</td>
<td>
<input type="email" ng-model="UserModel.Email" name="UserEmail" ng-class="Submited?'ng-dirty':''" required autofocus class="form-control"/>
<span style="color:red" ng-show="(myForm.UserEmail.$dirty || Submited ) && myForm.UserEmail.$error.required">Please enter Email</span>
<span style="color:red" ng-show="myForm.UserEmail.$error.email">Email is not valid</span>
</td>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" ng-model="UserModel.Password" name="UserPassword" ng-class="Submited?'ng-dirty':''" required autofocus class="form-control"/>
<span style="color:red" ng-show="(myForm.UserPassword.$dirty || Submited) && myForm.UserPassword.$error.required">Password Required</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="submit" class="btn btn-success" />
</td>
</tr>
</table>
</form>
</div>
@section scripts{
<script src="~/Scripts/LoginController.js"></script>
}
Add script reference at the end of Index.cshtml page.
Take a look at following things i used in above Index.cshtml view.
ng-Model: ngModel is a angular directive.it is used for two way binding data from view to controller and controller to view.In above example i used it to bind from data to angular controller.
ng-show: ngShow allows to display or hide elements based on the expression provided to ngShow attribute.
ng-submit: ng-submit prevents the default action of form and binds angular function to onsubmit events. This is invoked when form is submitted.
$dirty: It is angular built in property. It will be true if user interacted with form other wise false.This is one of the angular validation property i used in above example.There are many validation properties in angular like $invalid,$submitted,$pristine,$valid and $error.We will learn about all these these properties in later tutorials.