All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Login Page Using Angularjs And Bootstrap

Last Updated : Mar 11, 2024

Login Page Using Angularjs And Bootstrap

In this tutorial we will show you the solution of login page using angularjs and bootstrap, here we defined json array with login information then checking user entered details with json array values if it is correct it will throw success message on webpage otherwise it throws error message.

We used bootstrap for style so we can easily style and responsive website.

We just use predefined class in bootstrap on our html elements it will gives output of style we don’t need to define block of style properties for each elements.

Step By Step Guide On Login Page Using Angularjs And Bootstrap :-

Here in our application form we created two input fields for collect user mail id and password then one submit button.

In controller we initially flags and event message variables sets to ‘false’ so it cant affect output.

When user filling on input field it initially throws required error for user awareness after that our submit will turn to enable mode.

When user clicks on ‘submit’ button it will loads authendication function here checking user entered details with json array values for verification.

If those are same it will throw success message otherwise it throws error message.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Login Page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script>
var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
 $scope.user={'username':'','password':''};
 //----- Users json
 var validUsers= [
  {'username':'dhanu@gmail.com', 'password':'1234'},
  {'username':'priya@friends.com', 'password':'1234'},
 ];
 $scope.showError = false; // set Error flag
 $scope.showSuccess = false; // set Success Flag
 //------- Authenticate function
 $scope.authenticate = function (){
  var flag= false;
for(var i in validUsers){ // loop on users array
if($scope.user.username == validUsers[i].username && $scope.user.password == alidUsers[i].password){
    flag = true;
    break;
   }
else{
    flag = false;
   }
  }
  //-------- set error or success flags
  if(flag){
   $scope.showError = false;
   $scope.showSuccess = true;
  }
  else{
   $scope.showError = true;
   $scope.showSuccess = false;
  }
 }
});
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController" class="container">
            <form name="myForm">
            <div class="login-container">
                <h2>Login Page</h2>
            <div class="row">
            <div class="col-md-12">
            <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" ng-model="user.username" required class="form-control">
            <div ng-show="myForm.email.$error.email" class="error">Invalid email!</div>
            <div ng-show="myForm.email.$error.required && myForm.email.$touched" class="error">Required!</div>
            </div>
            </div>
            <div class="col-md-12">
            <div class="form-group">
            <label>Password</label>
            <input type="password" name="pass" ng-model="user.password" required class="form-control">
            <div ng-show="myForm.pass.$error.required && myForm.pass.$touched" class="error">Required!</div>
            </div>
            </div>
            <div class="col-md-12">
            <div class="form-group">
            <button ng-click="authenticate()" ng-disabled="myForm.$invalid" class="btn btn-success pull-right">Login</button>
            <div class="clearfix"></div>
            </div>
            </div>
            </div>
            <div class="row">
            <div class="col-md-12">
            <div ng-show="showError" class="alert alert-danger">Wrong credentials!</div>
            <div ng-show="showSuccess" class="alert alert-success">Login Successful!</div>
            </div>
            </div>
            </div>
            </form>
            </div>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. This file contains angularjs is distributed as a javascript file for support our program and added to webpage must by using <script> tag.
  5. When using bootstrap we need to import bootstrap minified css,js,jquery files must otherwise using bootstrap classes we cant apply style on elements.
  6. In controller we created variable app for access application ‘myApp’ then we appends to controller ‘myController’ with $scope object.
  7. We initially sets input field value to null using $scope object then we created json array ‘validUser’ with some users mail id and passwords those information only considered as valid.
  8. Initially we sets variable ‘showError,showSuccess’ to ‘false’ then we defined authendicate function within that we checking user entered mail id and password with valid json array values.
  9. If those details are same then showSuccess variable sets to ‘true’ so ‘ng-show’ directive will display success message on screen, otherwise showError variable sets to ‘true’ so ‘ng-show’ directive will display error message on screen.
  10. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  11. <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
  12. In <div> tag we declared our ng-app ‘myApp’ it defines our application controller ‘myController’ within that we defined our login form details.
  13. Within <div> element we defined class attribute with more class value each of them predefined style contain of bootstrap. So we just add class value it will apply some block of style properties to that element too easily.
  14. In input tag using directive of ‘ng-model’ we collects user entered details and as we know ‘ng-show’ directive used to display error message on screen.
  15. When user clicks on submit button it loads authenticate function defined in controller for checks login details.
  16. Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to create simple login page using angularjs and bootstrap.

When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.

In our program we used bootstrap for style elements and make responsive form when using bootstrap it needs internet for executes the imported bootstrap links then only we can see style applied on elements.

When user after filling login details clicks on submit we can verify whether that user information is valid or not.

I hope this article on login page using angularjs and bootstrap helps you and the steps and method mentioned above are easy to follow and implement.