<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">

    <ion-nav-view id="main"></ion-nav-view>
    
    <script id="main.html" type="text/ng-template">
      <ion-view title="Home" hide-back-button="true">

    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>

    <ion-content has-header="true" padding="true">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, esse, suscipit, laborum, ipsam velit et ab pariatur harum eveniet quod optio assumenda officiis error quo ex ipsa molestias consectetur cupiditate.</p>

    </ion-content>

</ion-view>

    </script>
    
    <script id="kredit.html" type="text/ng-template">
      <ion-view title="Kredit" hide-back-button="true">

    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>

    <ion-content has-header="true">

        <ion-list>
            <ion-item href="#/app/cek-baki">
                Cek Baki
            </ion-item>
            <ion-item>
                Cek Tunggakan
            </ion-item>
            <ion-item>
                Angsuran
            </ion-item>
        </ion-list>

    </ion-content>

</ion-view>

    </script>
    
    <script id="sign-in.html" type="text/ng-template">
      <ion-view title="Sign-In">
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
        </ion-nav-bar>

        <ion-content has-header="true">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text" ng-model="user.username">
            </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 class="button button-block button-positive" ng-click="signIn()">
              Sign-In
            </button>
          </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-positive">
            <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-left"></i></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-dark">
            <h1 class="title">Menu</h1>
          </header>
          <ion-content class="has-header">
            <ion-list>
              <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/main">
                <i class="icon ion-home"></i>
                Home
              </ion-item>
              <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/kredit">
                <i class="icon ion-grid"></i>
                Kredit
              </ion-item>
              <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/profile">
                <i class="icon ion-document-text"></i>
                Report
              </ion-item>
              <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/setting">
                <i class="icon ion-settings"></i>
                Setting
              </ion-item>
              <ion-item item-type="item-icon-left" nav-clear menu-close ng-click="logout()">
                <i class="icon ion-log-out"></i>
                Logout
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-side-menu>

      </ion-side-menus>

    </script>


    <script id="kredit-cek-baki.html" type="text/ng-template">
      <ion-view title="Cek Baki">

        <ion-nav-buttons side="right">
          <button class="button button-icon ion-search" ng-click="showModal()"></button>
        </ion-nav-buttons>

        <ion-content has-header="true" padding="true">

          <div ng-switch on="result">
            <div ng-switch-when="true">
              <div class="list">
                <div class="item">
                  <h2>No Rekening</h2>
                  <p>{{ data.rekening }}</p>
                </div>
                <div class="item">
                  <h2>Nama Debitur</h2>
                  <p>{{ data.namaDebitur }}</p>
                </div>
                <div class="item">
                  <h2>Baki Debet</h2>
                  <p>Rp{{ data.bakiDebet }},00</p>
                </div>
              </div>
            </div>
            <div ng-switch-default>
              <p>Tap ikon search di pojok kanan atas untuk mencari rekening</p>
            </div>
          </div>

        </ion-content>

      </ion-view>

    </script>

    <script id="new-task.html" type="text/ng-template">

      <div class="modal">
<!-- Modal header bar --><ion-header-bar class="bar-positive">
          <h1 class="title"></h1>
          <button class="button button-clear" ng-click="closeModal()">Cancel</button>
        </ion-header-bar>

        <!-- Modal content area -->
        <ion-content>

          <div class="list">
            <label class="item item-input">
              <span class="input-label">No Rekening</span>
              <input type="number" ng-model="data.rekening">
            </label>
            <label class="item item-input">
              <span class="input-label">Password/PIN</span>
              <input type="password" ng-model="data.password">
            </label>
          </div>
          <div class="padding">
            <button class="button button-block button-positive" ng-click="submitModal(data)">
              Submit
            </button>
          </div>

        </ion-content>

      </div>

    </script>    
  </body>
</html>
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}
// controllers.js
angular.module('starter.controllers', ['ionic'])

    .controller('SignInCtrl', function($scope, $state, $http, $ionicLoading) {
        $scope.user = {};

        $scope.show = function() {
            $scope.loading = $ionicLoading.show({
              content: 'Sign in ..',
            });
        };
        $scope.hide = function(){
            $scope.loading.hide();
        };

        $scope.signIn = function() {
            $scope.show();
            
            setTimeout(function(){
                $scope.hide();
                $state.go('app.main');
            }, 2000);
            
            // $scope.show();
            // console.log('Sign-In', $scope.user);

            // $http.get('http://localhost/multipilarbalantika/api2/login?username='
            //     + $scope.user.username
            //     + '&password='
            //     + $scope.user.password)
            //     .success(function(data) {
            //         $scope.hide();
            //         $state.go('app.main');
            //     })
            //     .error(function(data) {
            //         $scope.hide();
            //         console.log('Error: ' + data.error.message);
            //     });
        };
      
    })

    .controller('AppCtrl', function ($scope, $state) {

        $scope.show = function() {
            $scope.loading = $ionicLoading.show({
              content: 'Loading',
            });
        };
        $scope.hide = function(){
            $scope.loading.hide();
        };

        $scope.logout = function () {
            $state.go('signin');
        };

    })

    .controller('MainCtrl', function ($scope, $state) {

    })

    .controller('SettingCtrl', function ($scope, $state) {

    })

    .controller('KreditCtrl', function ($scope, $state) {

    })

    .controller('CekBakiCtrl', function ($scope, $state, $ionicPopup, $ionicModal) {
        $scope.data     = {};
        $scope.result   = false;

        // Create and load the Modal
          $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
            $scope.modal = modal;
          }, {
            scope: $scope,
            animation: 'slide-in-up',
            focusFirstInput: true
          });

          // Called when the form is submitted
        $scope.submitModal = function(data) {
            if ( ! $scope.data.rekening) {
                $ionicPopup.alert({
                    title: 'Rekening harus di isi'
                });
                return;
            }

            if ( ! $scope.data.password) {
                $ionicPopup.alert({
                    title: 'Password harus di isi'
                });
                return;
            }

            console.log(data);
            data.rekening = data.password = "";
            $scope.modal.hide();
            $scope.data.rekening    = '101-12345';
            $scope.data.namaDebitur = 'John Doe';
            $scope.data.bakiDebet   = '100.000';
            $scope.result   = true;
        };

        // Open our new task modal
        $scope.showModal = function() {
            $scope.modal.show();
            $scope.result   = false;
        };

        // Close the new task modal
        $scope.closeModal = function() {
            $scope.modal.hide();
        };
    })

;


// services.js
angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var friends = [
    { id: 0, name: 'Scruff McGruff' },
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Ash Ketchum' }
  ];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
});




// app.js
// Ionic Starter App

// 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', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

.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

        // default page when first loaded
        .state('signin', {
            url: "/sign-in",
            templateUrl: "sign-in.html",
            controller: 'SignInCtrl'
        })

        // abstract/default layout after sign-in
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: "menu.html",
            controller: "AppCtrl"
        })

        // default page after sign-in
        .state('app.main', {
            url: "/main",
            views: {
                'menuContent': {
                    templateUrl: "main.html",
                    controller: "MainCtrl"
                }
            }
        })

        // page for "kredit" main
        .state('app.kredit', {
            url: "/kredit",
            views: {
                'menuContent': {
                    templateUrl: "kredit.html",
                    controller: "KreditCtrl"
                }
            }
        })

        // page for "kredit/cek-baki" main
        .state('app.cek-baki', {
            url: "/cek-baki",
            views: {
                'menuContent': {
                    templateUrl: "kredit-cek-baki.html",
                    controller: "CekBakiCtrl"
                }
            }
        })

        // page for "kredit/cek-baki" main
        .state('app.setting', {
            url: "/setting",
            views: {
                'menuContent': {
                    templateUrl: "setting.html",
                    controller: "SettingCtrl"
                }
            }
        })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise("/sign-in");

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.