AngularJS Tutorial for Login with MVC

Sahil Saini
8y
130.1k
0
3

100

Article

Introduction

When selecting the latest technologies, several factors come into play, including how will these technologies will be integrated with our project.
This article solves the problem for beginners who start working with AngularJS and MVC.
Here I tell each and every aspect of the AnguarJS to use with what, why, and how.

Create Database and Tables

Firstly Create database named TestData.
After creating the database create a table with the name Logins.

Set the Id column as primary key and auto increment id in every table.
That's it with the database.

Get the JS and CSS files from given links

Download AngularJs min file from here.
Download Bootstrap css and js from here.
Download Bootstrap.theme.min.css from here.

To be familiar with the things Click Here

Let's start with the code

Open the VS2012 ,Create New ASP.Net MVC4 Web Application and give the Name LoginAngularMvcApp.
Go to Models Folder in the solution explorer of visual studio.
Right click the Models folder and find ADD >>> ADO.NET Entity Data Model. Select ADO.NET Entity Data Model.
Provide the name LoginModel. After that pop up will appear .

Select generate from database and click next.

In the given box type entity name as SahilEntities and After that click New connection.

Select Sql server authentication and fill the credentials like server name ,user name ,password,and then select your database from the database list.

Check the checkboxes of tables and click on finish.

Create the LoginController by right clicking on the controller folder

Change the Index ActionResult name from index to Login.This will return the Login View.
After that [HttpPost] Login method with Login class as parameter serves the purpose for actual operation of login.
Here we first check from the database that requesting user exists in the database or not.If exists than enteredpassword is compared with database password.
If exists return 0,-1 or userID.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BootstrapThemeAngular.Models;
using BootstrapThemeAngular.Utilities;
using System.Text;
using System.Web.Security;
namespace BootstrapThemeAngular.Controllers
{
public class LoginController : Controller
{
// GET: /Login/
public ActionResult Login()
{
return View();
}
[HttpPost]
public string Login(Login data)
{
bool isPasswordCorrect = false;
string un = data.Username;
string Password = data.Password;
using (SahilEntities entity = new SahilEntities())
{
var user = entity.Logins1.Where(u => u.UserName == un).FirstOrDefault();
if (user != null)
{
if (Password == user.Password)
{
Session["LoginID"] = user.ID;
Session["Username"] = user.Fname + ' ' + user.Lname;
return user.ID.ToString();
}
else
{
return "0";
}
}
else
{
return "-1";
}
}
}

Add 3 files --> Module.js,Controller.js,Service.js in content folder

Here we register the module with the application.
Here myApp is the module name that we used with ng-app directive in HTML view.
In Module.js write the given code.

var app = angular.module("myApp", []);

myCntrl is the controller name that is registered with the myApp module and used in HTML view with ng-controller directive.
$scope is used to refers to the application.Data passed to $scope in controller is accessible in view.
myService is the name of service that is used with controller to call the functions from server.
LoginCheck function get the username and password from $scope and store in the object variables.
UserLogin function from service is called that returns the response in form of values after that certain action performs.
Clearfields clear the HTML controls after login.
alertmsg hides the alert modal that displays alert messages.

app.controller("myCntrl", function ($scope, myService) {
$scope.LoginCheck = function () {
var User = {
UserName: $scope.uName,
Password: $scope.password
};
$("#divLoading").show();
var getData = myService.UserLogin(User);
getData.then(function (msg) {
if (msg.data == "0") {
$("#divLoading").hide();
$("#alertModal").modal('show');
$scope.msg = "Password Incorrect !";
}
else if (msg.data == "-1") {
$("#divLoading").hide();
$("#alertModal").modal('show');
$scope.msg = "Username Incorrect !";
}
else {
uID = msg.data;
$("#divLoading").hide();
window.location.href = "/Home/Index";
}
});
debugger;
}
function clearFields() {
$scope.uName = '';
$scope.uPwd = '';
}
});

$scope.alertmsg = function () {
$("#alertModal").modal('hide');
};

In Service.js write the given code.
myService is the name of the service registers with the myApp module.
$http is passed as parameter. $http serves the purpose for ajax call to the server.
In this service UserLogin function is used to call the Login method from server by providing url.
This method returns the response to the controller.

app.service("myService", function ($http) {
this.UserLogin = function (User) {
var response = $http({
method: "post",
url: "/Login/Login",
data: JSON.stringify(User),
dataType: "json"
});
return response;
}
});

Now write the code to display the view on screen

Write the code in Login.cshtml
In View HTML tag is used with the directive ng-app. ng-app calls the myApp module to initialize with this view.
After that all the css and script files are dropped in head tag.
ng-controller directive is used with the div tag to initialize with the controller we created.
<div class="container" ng-controller="myCntrl"> . Here ng-controller is a directive and myCntrl is the name of controller we specify in the controller.js file.
Alert modal is placed to display the messages for password or username incorrect.
In the container fluid class the panel is placed to put the controls on the panel.
CSS is applied to the panel for attractive look.
divLoading is used to just make the waiting time screen attractive.This serves for no other purpose.
Button placed after that to call login Method.Button contains ng-disabled directive ,use of this directive is untill,unless controls are not filled the Login button is disabled.
LoginCheck() function in ng-click directive calls the funtion from controller after click.

@{
ViewBag.Title = "Login";
}
<html ng-app="myApp">
<head>
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/Angular/RegisterModule.js"></script>
<script src="~/Content/Angular/RegisterService.js"></script>
<script src="~/Content/Angular/RgstrController.js"></script>
<script src="~/Content/Angular/dirPagination.js"></script>
</head>
<body>
<div ng-controller="myCntrl">
<h1>
<img src="~/Content/images/Loginicon.png" /></h1>
<br />
<div id="alertModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" id="btn" value="Close" class="close" data-dismiss="modal">×</button>
{{msg}}
</div>
<div class="modal-footer">
<button type="button" ng-click="alertmsg()" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="panel panel-success" style="width: 50%;">
<div class="panel-heading">Login</div>
<div class="panel-body" style="box-shadow: -6px 2px 46px 7px #888888; padding: 20px;">
<form name="loginForm" novalidate>
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-md-3" style="text-align: right;">
Username :
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" id="Uname" placeholder="Username" ng-model="uName" name="Username" required autofocus />
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="text-align: right;">
Password :
</div>
<div class="col-md-6">
<div class="input-group">
<input type="password" class="form-control" id="password" placeholder="Password" ng-model="password" name="Password" required autofocus />
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
please wait...<img src="~/Content/images/load.png">
</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-5" style="text-align: right;">
<button id="btnLogin" type="submit" class="btn btn-success" ng-disabled="!(password && uName)" ng-click="LoginCheck()">Login</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>