Angular JS - Login with Local storage

Hello friends, in this tutorial i am sharing the Local Storage login example using Angular JS.


<!doctype html>

<html>

  <head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

  </head>

  <body>
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-2889014772867988">
</amp-auto-ads>

  <div ng-app="LocalLogin" ng-controller="LoginCtrl">

    <center><h3> Angular JS Local storage Login Example </h3> </center>

      <form ng-submit="login()">

      <div class="form-group">

        <input required type="text" class="form-control" ng-model="uname" placeholder="Enter name">

      </div>

    

      <div class="form-group">

        <input required type="password" class="form-control" ng-model="upasswd" placeholder="Enter password">

      </div>

          <center><button type="submit" class="btn btn-success">LOGIN</button></center> 

      </form>

    </div>

    </div>

    <script type="text/javascript" src="http://rohanghatwai.in/js/angularls.js"></script>

    <script src="http://rohanghatwai.in/js/samp.js"></script>

  </body>

</html>


var localstorageApp = angular.module('LocalLogin', ['LocalStorageModule']);

var Gname = "nikhil", Gpass = "test";

localstorageApp.controller('LoginCtrl', ['$scope', 'localStorageService', function($scope, localStorageService) {
  $scope.login = function() {
 
 localStorageService.add('UNAME',$scope.uname); // User name added to local storage 
 localStorageService.add('UPASS',$scope.upasswd); // Password name added to local storage
 
 var UN = localStorageService.get('UNAME');
 var UP = localStorageService.get('UPASS');
 
 if(Gname==UN && Gpass==UP){
  $scope.uname = UN;
  $scope.upasswd = UP;
        var resp_success = '
Welcome! '+UN+'
';
   $("#login_resp").html(resp_success).show();
 }else{
  var resp_success = '
Login Failed!
';
   $("#login_resp").html(resp_success).show();
  $scope.uname = '';
  $scope.upasswd = '';
 }
  };
}]);


Screen Shots :




Demo Link:

Comments

Post a Comment