AngularJS Simple Login Page HTML

HTML CODE

<div class="container" ng-app="myApp">

  <div class="row">

    <div class="col-md-12">

      <div class="page-header">

        <h1>{{ title }}</h1>

      </div>

    </div>

    

    <div ui-view></div>

    

  </div>

  

  <script type="text/ng-template" id="login.html">

    <div class="col-md-12">

      <h3>Login Page</h3>

      

      <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>

  </script>

  

  <script type="text/ng-template" id="home.html">

    <div class="col-md-12">

      <h3>Home Page</h3>

    

      <a ui-sref="login">Back</a>

    </div>

  </script>

</div>

JS CODE 

(function() {

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

  

  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('/home');

    

    $stateProvider

      .state('login', {

        url : '/login',

        templateUrl : 'login.html',

        controller : 'LoginController'

      })

      .state('home', {

        url : '/home',

        templateUrl : 'home.html',

        controller : 'HomeController'

      });

  }]);

  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 !";

      }   

    };

    

  });

  

  app.controller('HomeController', function($scope, $rootScope, $stateParams, $state, LoginService) {

    $rootScope.title = "AngularJS Login Sample";

    

  });

  

  app.factory('LoginService', function() {

    var admin = 'admin';

    var pass = 'pass';

    var isAuthenticated = false;

    

    return {

      login : function(username, password) {

        isAuthenticated = username === admin && password === pass;

        return isAuthenticated;

      },

      isAuthenticated : function() {

        return isAuthenticated;

      }

    };

    

  });

  

})();