title: how to set a starting page in a ionic project
body: <p>Sorry if this is a stupid question I am still fairly new to this. I have a basic understanding of how the navigation works with angular js but I cant figure out how to set a starting page. I want to set my login page as my start page the url shows that the login page is open ("<a href="http://localhost:8100/#/template/login">http://localhost:8100/#/template/login</a>") but it only displays a blank header which I suspect is from my index (ion-nav-bar).</p>
  
  <p>thank you.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body ng-app="starter"&gt;
      &lt;!--
        The nav bar that will be updated as we navigate between views.
      --&gt;
      &lt;ion-nav-bar class="bar-stable"&gt;
        &lt;ion-nav-back-button&gt;
        &lt;/ion-nav-back-button&gt;
      &lt;/ion-nav-bar&gt;
      &lt;!--
        The views will be rendered in the &lt;ion-nav-view&gt; directive below
        Templates are in the /templates folder (but you could also
        have templates inline in this html file if you'd like).
      --&gt;
      &lt;ion-nav-view class="slide-left-right"&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>login.html</p>
  
  <pre><code>&lt;ion-view view-title="Login" name="login-view"&gt;
    &lt;ion-content class="padding"&gt;
    &lt;h1&gt;lalalalala&lt;/h1&gt;
       &lt;div class="list"&gt;
           &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Username&lt;/span&gt;
                &lt;input type="text"&gt;
           &lt;/label&gt;
           &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Password&lt;/span&gt;
                &lt;input type="password"&gt;
           &lt;/label&gt;
        &lt;/div&gt;
        &lt;button class="button button-block button-calm" ng-click="login()"&gt;Login&lt;/button&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova &amp;&amp; window.cordova.plugins &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleLightContent();
      }
    });
  })
  
  .config(function($stateProvider, $urlRouterProvider) {
  
    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider
  
    // setup an abstract state for the tabs directive
      .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
  
    // Each tab has its own nav history stack:
  
  .state('tab.login', {
      url: '/login',
      views: {
        'login': {
          templateUrl: 'templates/login.html',
          controller: 'loginCtrl'
        }
      }
    })
  
    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })
  
    .state('tab.projects', {
        url: '/projects',
        views: {
          'tab-projects': {
            templateUrl: 'templates/tab-projects.html',
            controller: 'projectsCtrl'
          }
        }
      })
      .state('tab.projects-detail', {
        url: '/projects/:projectsId',
        views: {
          'tab-projects': {
            templateUrl: 'templates/projects-detail.html',
            controller: 'projectsDetailCtrl'
          }
        }
      })
  
    .state('tab.account', {
      url: '/account',
      views: {
        'tab-account': {
          templateUrl: 'templates/tab-account.html',
          controller: 'AccountCtrl'
        }
      }
    });
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('login');
  
  });
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('loginCtrl', function($scope) {})
  
  .controller('DashCtrl', function($scope) {})
  
  .controller('projectsCtrl', function($scope, Chats) {
    $scope.chats = Chats.all();
    $scope.remove = function(chat) {
      Chats.remove(chat);
    }
  })
  
  .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
    $scope.chat = Chats.get($stateParams.chatId);
  })
  
  .controller('AccountCtrl', function($scope) {
    $scope.settings = {
      enableFriends: true
    };
  });
  </code></pre>