Start ionic

  1. node install
  2. command
    1. npm install -g ionic
    2. npm install -g gulp
    3. npm install -g bower
    4. npm install -g cordova
  3. android sdk/studio & xcode (mac only)
  4. download chrome livereload plugin : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en

Test :

  • ionic -v
  • gulp -v
  • bower -v

// bower – package manager front end framework
bower install jquery
bower update jquery

 

New Project

  1.  ionic start gstcalculator
    1. Create an ionic.io account to send Push Notifications and use the Ionic View app?
      (Y/n): n
  2.  ionic serve
    1. Multiple addresses available.
      Please select which address to use by entering its number from the list below:
      1) 192.168.244.1 (VMware Network Adapter VMnet1)
      2) 192.168.153.1 (VMware Network Adapter VMnet8)
      3) 172.16.99.146 (Wi-Fi)
      4) localhost
      Address Selection: 4 <– choose localhost
  3. quit @ q
  4. ionic serve –lab
    1. Untitled
  5. Open atom
    1. Change title
      Untitled
  6. Ubah CSS
    1. http://ionicframework.com/docs/components/
  7. Insert input type
    1. Untitled
  8. Insert checkbox and button
    1. <ion-content>
      <div class=”list list-inset”><div class=”item item-input”>
      <input type=”text” placeholder=”Amount”>
      </div>
      <!– .item.item-toggle{Inclusive GST?}>lable.toggle toggle-assertive>input:checkbox+.track>.hanlde –>
      <div class=”item item-toggle”>
      Inclusive GST?
      <label for=”” class=”toggle toggle-assertive”>
      <input type=”checkbox” name=”” id=””>
      <div class=”track”>
      <div class=”handle”></div>
      </div>
      </label>
      </div></div>
      <div style=”text-align:center”>
      <button class=”button icon-left ion-calculator button-positive”>
      Submit
      </button>
      </div>
      </ion-content>
  9. Buka app.js tambah controller
    angular.module(‘starter’, [‘ionic’]).controller(‘GstCtrl’, function($scope){$scope.data = {
    amount: 0
    }; // user input$scope.calculateGst = function (){
    console.log($scope.data.amount);
    }})
  10.  Terima dari controller
    1. Untitled
  11. Calculate di controller
    1. Untitled
    2. .controller(‘GstCtrl’, function($scope){$scope.data = {
      amount: 0,
      inclusiveGst: false,
      subTotal: 0,
      gstAmount: 0,
      grandTotal: 0
      }; // user input$scope.calculateGst = function (){
      console.log($scope.data.amount);
      console.log($scope.data.inclusiveGst);if($scope.data.inclusiveGst){
      $scope.data.subTotal = $scope.data.amount / 1.06;
      $scope.data.gstAmount = $scope.data.amount * 0.06;
      $scope.data.grandTotal = $scope.data.amount;
      }
      else {
      $scope.data.subTotal = $scope.data.amount;
      $scope.data.gstAmount = $scope.data.amount * 0.06;
      $scope.data.grandTotal = $scope.data.subTotal * 1.06;
      }
      }
      })
  12. Papar hasil dari controller
    1. Untitled
    2. <div class=”list list-insert”>
      <div class=”item”>
      Sub Total
      <span class=”item-note” ng-bind=”data.subTotal | currency:’RM ‘:2″>
      <i class=”icon ion-search placeholder-icon”></i>
      RM0.00
      </span>
      </div>
      <div class=”item”>
      GST Amount
      <span class=”item-note” ng-bind=”data.gstAmount | currency:’RM ‘:2″>
      RM0.00
      </span>
      </div>
      <div class=”item”>
      Grand Total
      <span class=”item-note” ng-bind=”data.grandTotal | currency:’RM ‘:2″>
      RM0.00
      </span>
      </div>
      </div>

Leave a Reply

Your email address will not be published. Required fields are marked *