Saturday, March 17, 2018

300 Create Ionic Sales Record Book Apps

300 Create Ionic Sales Record Book Apps



.
300 Create Ionic Sales Record Book Apps
Building On Codepen Platform

1) Create Startup Codes

Red colored codes will be removed later.
Blue colored codes are for mockup purpose. 
The startup codes generate a Single Ionic Page showing two typical date format ie String Format and Epoch Format. Date and time is separated with a capital T. UTC time is defined with a capital letter Z. If you want to modify the time relative to UTC, remove the Z and add +HH:MM or -HH:MM instead. (Refer http://www.w3schools.com/js/js_date_formats.asp  )
HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
    <body ng-app="app">
  <div>
  <div>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>
</div>
     
     <script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
  <ion-nav-buttons side="right" class="has-header">
      <button class="button button-icon" ng-click="insertRecord()">
        <i class="icon ion-compose"></i>
      </button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
{{date}}
<br/>
{{date.getTime()}}
       </ion-content>
</ion-view>
    </script>    
         
  </body>
</html>
JS

angular.module(app, [ionic])
.controller(homeCtrl, [$scope, $stateParams, $ionicModal,
function ($scope, $stateParams, $ionicModal) {
  $scope.date=new Date();
}])
   
.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 states controller can be found in controllers.js
  $stateProvider
   

      .state(home, {
    url: /page1,
    templateUrl: home.html,
    controller: homeCtrl
  })
$urlRouterProvider.otherwise(/page1)

});
300 Create Ionic Sales Record Book Apps 1
(http://codepen.io/notarazi/pen/oBBXdb)

2) Add Dialog

HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
    <body ng-app="app">
  <div>
  <div>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>
</div>
     
     <script id="home.html" type="text/ng-template">
link download
Posted by at

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)