angular login page

<!DOCTYPE html>
<html>

  <head>
    <title>Angular LogIn Page Example </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="app.config.js"></script>
    <script src="login.controller.js"></script>
    <script src="home.controller.js"></script>
    <script src="login.service.js"></script>
    <script src="home.service.js"></script>
  </head>

  <body>
      <div class="container" ng-app="myApp">
            <div ui-view></div>
      </div>
  </body>

</html>

/* Styles go here */


var app = angular.module('myApp', ['ui.router']);
(function() {
  
  
  

  app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
    $rootScope.title = "AngularJS Login Sample";
    
    $scope.formSubmit = function() {
      if(LoginService.login($scope.username, $scope.password)) {
        $scope.error = '';
        $scope.username = '';
        $scope.password = '';
        $state.transitionTo('home');
      } else {
        $scope.error = "Incorrect username/password !";
      }   
    };
    
  });
  
 
  
  
  
})();

  
  (function() {
  app.controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
    $rootScope.title = "AngularJS Login Sample";
    
    $scope.formSubmit = function() {
      if(LoginService.isAuthenticated($scope.username, $scope.password)) {
        $scope.error = '';
        $scope.username = '';
        $scope.password = '';
        $state.transitionTo('home');
      } else {
        $scope.error = "Incorrect username/password !";
      }   
    };
    
  });
  
  })();

(function(){
   app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, HomeService) {
    $rootScope.title = "AngularJS Login Sample";
    $scope.userId = sessionStorage.getItem("ID");
    debugger;
    var userifo = HomeService.getUserInfo($scope.userId);
    if(userifo) {
      userifo.then(function(reply) {
          $scope.username = reply.data.name;
          $scope.role = reply.data.role;
      });
    }
  });
})();

(function(){
    app.run(function($rootScope, $location, $state, LoginService) {
      $rootScope.$on('$stateChangeStart', 
        function(event, toState, toParams, fromState, fromParams){ 
            console.log('Changed state to: ' + toState);
        });
      
        if(!LoginService.isAuthenticated()) {
          $state.transitionTo('login');
        }
    });
    
    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/login');
      
      $stateProvider
        .state('login', {
          url : '/login',
          templateUrl : 'login.html',
          controller : 'LoginController'
        })
        .state('home', {
          url : '/home',
          templateUrl : 'home.html',
          controller : 'HomeController'
        });
    }]);
})();

(function(){
  app.service('LoginService', function($q, $http) {
    var isAuthenticated = false;
    var isAuthenticate = function(username,pass) {
      debugger;
            var deferred = $q.defer();

            var serviceUrl = {
                method : 'GET',
                url: "userAuthentication.json"
            };

            $http(serviceUrl)
                .then(function successCallback(response) {
                    userInfo = response.data;
                    
                    isAuthenticated = username === response.data.ID && pass === response.data.pass;
                    
                    if(isAuthenticated){
                      sessionStorage.setItem("ID",username);
                      deferred.resolve(isAuthenticated);
                    }else{
                      deferred.reject(isAuthenticated);
                    }
                }, function errorCallback(response) {
                    deferred.reject(isAuthenticated);
                });
            return deferred.promise;
    };
    
    
    
    
    
    
    
    
    return {
      isAuthenticated : isAuthenticate
    }
    
  });
})()

<div class="col-md-12">
      <h3>Login Page</h3>
      Username = 404505 <br/> pass = hema404505
      <form ng-submit="formSubmit()" class="form">
        <div class="col-md-4">
          <div class="form-group">
            <input type="text" class="form-control" ng-model="username" placeholder="username" required=""/>
          </div> 

          <div class="form-group">
            <input type="password" class="form-control" ng-model="password" placeholder="password" required=""/>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-success">Login</button>
            <span class="text-danger">{{ error }}</span>
          </div>

        </div>
      </form>
    </div>

<div class="col-md-12">
      <h3>Home Page</h3>
      Welcome {{username}} , {{role}}
      <a ui-sref="login">Back</a>
    </div>

{
      "name":"hema",
      "ID":"404505",
      "pass":"hema404505"
}

{
      "name":"hema",
      "ID":"404505",
      "role":"web developer"
}

(function(){
  app.service('HomeService', function($q, $http) {
   
    var getUserInfo = function(id) {
            var serviceUrl = {
                method : 'GET',
                url: "userProfile.json"
            };
            return $http(serviceUrl)
    };
    
    
    
    
    
    
    
    
    return {
      getUserInfo : getUserInfo
    }
    
  });
})()