title: Create Onsenui login page
body: <p>I am trying to create a login page, where a user is redirected if they are not logged in. </p>
  
  <p>In my controller I have a pushPage('login.html') in my controller LoginController() however it seems to be redirecting in an endless loop (i.e. login.html page just keeps reloading and index.html appears for a fraction of a second) not sure why ..</p>
  
  <p><strong>LoginController</strong>()</p>
  
  <pre><code>app.controller('LoginController', ['$scope', '$http', function($scope,$http) {
  
     if(!checkLogin()) {
          myNavigator.pushPage('login.html');    
      }
  
  
  
      function checkLogin() {
          //temporariry return true;
  
          return false;
      }     
  }]);
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'&gt;
  
      &lt;script src="components/loader.js"&gt;&lt;/script&gt;
      &lt;script src="js/roundProgress.js"&gt;&lt;/script&gt;
      &lt;script&gt;
         var app =  ons.bootstrap('app',  ['onsen','angular-svg-round-progress']);
      &lt;/script&gt; 
  
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/cortisol.js"&gt;&lt;/script&gt;
      &lt;script src="js/circular.js"&gt;&lt;/script&gt;
      &lt;script src="js/settings.js"&gt;&lt;/script&gt;
      &lt;script src="js/checkLogin.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="components/loader.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script src="js/jquery.sparkline.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body &gt;
  
  &lt;ons-navigator var="myNavigator"&gt;
  &lt;ons-page ng-controller="LoginController"&gt;
      &lt;ons-tabbar position="top"&gt;
        &lt;ons-tabbar-item page="dashboard.html" style="margin-top:20px"&gt;&lt;span style="margin-top:20px"&gt;&lt;img src="img/icon.svg" width="34"/&gt;&lt;/span&gt;&lt;/ons-tabbar-item&gt;
        &lt;ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"&gt;&lt;/ons-tabbar-item&gt;
        &lt;ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"&gt;&lt;/ons-tabbar-item&gt;
        &lt;ons-tabbar-item page="capture.html"  icon="ion-pinpoint"&gt;&lt;/ons-tabbar-item&gt; 
        &lt;ons-tabbar-item page="settings.html"  icon="ion-android-settings"&gt;&lt;/ons-tabbar-item&gt;
      &lt;/ons-tabbar&gt;
  &lt;/ons-page&gt;
  &lt;/ons-navigator&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>