<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Sign-in, Then Tabs Example</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
  
  <script id="login.html" type="text/ng-template">
    <ion-view title="Sign-In">
      <ion-content>
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Email</span>
            <input type="text" ng-model="user.email">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" ng-model="user.password">
          </label>
        </div>
        <div class="padding">
          <button nav-clear class="button button-block button-positive" ng-click="signIn(user)" >
            Log in
          </button>
          <!-- <p class="text-center">
            <a href="#/forgot-password">Forgot password</a>
          </p> -->
        </div>
      </ion-content>
    </ion-view>
  </script>
  
  <script id="menu.html" type="text/ng-template">
    <ion-side-menus>

      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
          <h1 class="title">Menu</h1>
        </header>
        <ion-content class="has-header">
          <ion-list>
            <ion-item nav-clear menu-close href="#/app/search">
              Search
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
  </script>

  <script id="search.html" type="text/ng-template">
    <ion-view title="Search">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
      </ion-nav-buttons>
      <ion-content class="has-header">
        <h1>Search</h1>
      </ion-content>
    </ion-view>
  </script>
</html>

// Ionic Starter App, v0.9.20

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('login', {
    url: "/login",
    // abstract: true,
    templateUrl: "login.html",
    controller: 'LoginCtrl'
  })

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'menuContent' :{
        templateUrl: "search.html"
      }
    }
  });

  $urlRouterProvider.otherwise('/login');
})
.controller('LoginCtrl', function($scope, $state) {
  $scope.signIn = function(user) {
    console.log('Sign in');

    $state.go('app.search');
  }
})
.controller('AppCtrl', function($scope) {
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.