Angular / UI-router auth demo

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

app.config(function($stateProvider,$urlRouterProvider){
  
  $stateProvider.state('main',{
    templateUrl: 'main.html',
    abstract: true,
    resolve: {
      user: function(User){
        console.log('checking authentication')
        return User.checkAuthentication();
      }
    }
  });
  
  $stateProvider.state('main.home',{
    templateUrl: 'home.html',
    url: '/home',
    controller: 'HomeController'
  });
  
  
  $stateProvider.state('login',{
    templateUrl: 'login.html',
    controller: 'LoginController'
  });
  
  $urlRouterProvider.otherwise('/home');
  
});

app.run(function($rootScope,$state){
  
  
  $rootScope.$on('$stateChangeError',function(ev,toState,toParams,fromState,fromParams,err){
    
    if(err.message === 'NOT_AUTHENTICATED'){
      console.log('not authenticated, sending to login')
      $state.go('login')
    }
    
  })
  
  
})

app.controller('HomeController',function(user,$scope){
  $scope.user = user;
})

app.controller('LoginController',function(User,$scope,$state){
  
  $scope.login = function(){
    User.login().then(function(){
      console.log('login success, sending to home')
      $state.go('main.home');
    })
  }
  
})

app.factory('User',function($http,$q){
  
  var _user = {
    isAuthenticated: false
  };
  
  function _checkAuthentication(){
      if(!_user.isAuthenticated){
        throw new Error('NOT_AUTHENTICATED');
      }
      return $q.when(_user)
  }
  
  function _login(){
    return $http.get('user.json').then(function(res){
      angular.extend(_user,res.data);
      return _user;
    })
  }
  
  return {
    checkAuthentication : _checkAuthentication,
    login: _login
  }
  
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.27/angular.js" data-semver="1.2.27"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ui-view></div>
  </body>

</html>

/* Put your css in here */

<h1>login</h1>

<button ng-click="login()">Login</button>

<h1>main</h1>
<div ui-view></div>

{
  "username": "joe bob",
  "isAuthenticated" : true
}

<h1>home</h1>
{{user}}