AngularJS Login Auth

<!DOCTYPE html>
<html ng-app="authentication">

<head>
  <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">  
</head>

<body>
  <label for="isLoggedIn">
    <input type="checkbox" name="isLoggedIn" ng-model="isLoggedIn" /> Is logged in
  </label>

  <hr />

  <ul>

    <li><a href="#/admin">Admin</a></li>
  </ul>
  
  <hr />
  
  <div ng-view></div>
</body>


<script type="text/ng-template" id="admin.html">
  <h1>Admin</h1>
  <p>Welcome to the admin screen!</p>
</script>


</html>

angular.module('authentication', ['ngRoute'])
  .factory('authService', ['$rootScope', function($rootScope) {
    return {
      isAuthenticated: function() {
        // Check that the user is logged in. 
        // We'll just return the value from our checkbox.
        
        return $rootScope.isLoggedIn;
        return email === "wkwwong@gmail.com"
      }
    };
  }])
  .config(['$routeProvider', function($routeProvider) {
      var isLoggedIn = ['$q', 'authService', function($q, authService) {
          var deferred = $q.defer();

          if (authService.isAuthenticated()) {
            deferred.resolve();
          } else {
            deferred.reject({ needsAuthentication: true });
          }

          return deferred.promise;
        }
      ];

      $routeProvider.whenAuthenticated = function(path, route) {
        route.resolve = route.resolve || {};

        angular.extend(route.resolve, { isLoggedIn: isLoggedIn });

        return $routeProvider.when(path, route);
      };

      $routeProvider
        .when('/login', { templateUrl: 'login.html', controller: 'LoginCtrl' })
        .whenAuthenticated('/admin', { templateUrl: 'admin.html' })
        .otherwise({ redirectTo: '/login' });
    }
  ])
  .run(['$location', '$rootScope', '$log', 'authService', '$route',
    function($location, $rootScope, $log, authService, $route) {
      $rootScope.$on('$routeChangeError', function(ev, current, previous, rejection) {
        if (rejection && rejection.needsAuthentication === true) {
          var returnUrl = $location.url();
          
          // User need authentication, redirect to /login and pass along the return URL
          $location.path('/login').search({ returnUrl: returnUrl });
        }
      });
    }
  ])
  .controller('LoginCtrl', ['$scope', '$location', function($scope, $location) {
    $scope.returnUrl = $location.search().returnUrl;
  }]);

# How it works

This adds a function, `whenAuthenticated()` to the `$routeProvider`. You can use that to define your routes that needs authentication (as opposed to `when()`).

The function adds a resolve dependency to the route that will check if the user is authenticated or not.

If the resolve promise is rejected (see the `isLoggedIn` function in the `config` block), the `$routeChangeError` will be emitted.
From there you can examine the result of the promise and optionally redirect to a login/access denied page.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


    <div class="container">

      <form class="form-signin" role="form">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="email" class="form-control" placeholder="Email address" required autofocus>
        <input type="password" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div> <!-- /container -->
  <small>Return URL: {{returnUrl}} {{email}}</small>