ionic

ionic & ngCordova GPS Map

Published July 29, 2016 | By admin

ให้เปิดไฟล์ index.html ในส่วนของ Header ให้ แปะไว้ด้านบนลองลงมาจาก style.css

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;">
        </script>

1 2	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&"> </script>

ให้เปิดไฟล์ app.js แล้วแปะ Controller ลงไป

.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) {
  var myLocation = new google.maps.LatLng(13.770742, 100.5024268);
  var RMUTP = new google.maps.LatLng(13.770999, 100.504326);

  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myLocation,
    zoom: 15
  });


  console.log(map)

  $scope.map = map;
  $ionicLoading.show();
  var posOptions = {
    timeout: 10000,
    enableHighAccuracy: true
  };
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function(position) {


      $ionicLoading.hide();

      var lat = position.coords.latitude;
      var lng = position.coords.longitude;


      //  alert("Got position: " + lat + ", " + lng);



      var myLocation = new google.maps.LatLng(lat, lng);


      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLocation,
        zoom: 12
      });
      var marker = new google.maps.Marker({
        map: map,
        label: "U",
        position: myLocation
      });
      var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
      var beachMarker = new google.maps.Marker({
        position: RMUTP,
        map: map,
        icon: image
      });


    }, function(err) {

      $ionicLoading.hide();

      if (error.code == PositionError.PERMISSION_DENIED) {
        alert("Permission denied. check setting");
      } else if (error.code == PositionError.POSITION_UNAVAILABLE) {
        alert("Cannot get position. May be problem with network or can't get a satellite fix.");
      } else if (error.code == PositionError.TIMEOUT) {
        alert("Geolocation is timed out.");
      } else {
        alert(error.message);
      }
    });
})

.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) {

var myLocation = new google.maps.LatLng(13.770742, 100.5024268);

var RMUTP = new google.maps.LatLng(13.770999, 100.504326);

var map = new google.maps.Map(document.getElementById('map'), {

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: myLocation,

zoom: 15

});

console.log(map)

$scope.map = map;

$ionicLoading.show();

var posOptions = {

timeout: 10000,

enableHighAccuracy: true

};

$cordovaGeolocation

.getCurrentPosition(posOptions)

.then(function(position) {

$ionicLoading.hide();

var lat = position.coords.latitude;

var lng = position.coords.longitude;

// alert("Got position: " + lat + ", " + lng);

var myLocation = new google.maps.LatLng(lat, lng);

var map = new google.maps.Map(document.getElementById('map'), {

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: myLocation,

zoom: 12

});

var marker = new google.maps.Marker({

map: map,

label: "U",

position: myLocation

});

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

var beachMarker = new google.maps.Marker({

position: RMUTP,

map: map,

icon: image

});

}, function(err) {

$ionicLoading.hide();

if (error.code == PositionError.PERMISSION_DENIED) {

alert("Permission denied. check setting");

} else if (error.code == PositionError.POSITION_UNAVAILABLE) {

alert("Cannot get position. May be problem with network or can't get a satellite fix.");

} else if (error.code == PositionError.TIMEOUT) {

alert("Geolocation is timed out.");

} else {

alert(error.message);

}

});

})

ส่วนหน้า index.html ในส่วนของ body ให้ใส่ tag ด้านล่างลงไปเพื่อสแดงผล

    <!-- Google Maps -->
          <div id="map"></div>

          <div class="buttons" ng-click="locate()">
              <button class="button button-clear icon ion-android-locate"></button>
          </div>

</div>

ให้เปิดไฟล์ style.css ซึ่งจะอยู่ในฟอรเดอร์ www/css/ และกำหนด style ให้กับ element id map

/* Empty. Add your own CSS if you like */
#map {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

/* Empty. Add your own CSS if you like */

#map {

width: 100%;

height: 80%;

background-color: yellow;

}

Posted in ionic, Uncategorized | Leave a comment

ngCordova FlashLight

Published July 28, 2016 | By admin

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

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller="MyCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>

    <div class="card">
      <div class="item item-text-wrap">
        <button class="button button-block button-calm" ng-click="LightOn()">
            เปิดไฟ
        </button>
        <button class="button button-block button-assertive" ng-click="LightOff()">
            ปิดไฟ
        </button>
      </div>
    </div>

          </ion-content>
    </ion-pane>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="MyCtrl">

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

<ion-content>

เปิดไฟ

</button>

ปิดไฟ

</button>

</div>

</ion-content>

</ion-pane>

</body>

</html>

// 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'
angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('MyCtrl', function($scope, $cordovaFlashlight) {

$scope.LightOn=function(){
  $cordovaFlashlight.switchOn()
    .then(
      function (success) { /* success */ },
      function (error) { /* error */ });
}

$scope.LightOff=function(){
  $cordovaFlashlight.switchOff()
    .then(
      function (success) { /* success */ },
      function (error) { /* error */ });

}



})

// 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'

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if(window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if(window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.controller('MyCtrl', function($scope, $cordovaFlashlight) {

$scope.LightOn=function(){

$cordovaFlashlight.switchOn()

.then(

function (success) { /* success */ },

function (error) { /* error */ });

}

$scope.LightOff=function(){

$cordovaFlashlight.switchOff()

.then(

function (success) { /* success */ },

function (error) { /* error */ });

}

})

Posted in AngularJS, ionic | Tagged Flash On | Leave a comment

ionic framework & Sqlite & ngCordova

Published July 22, 2016 | By admin

ionic framework & Sqlite & ngCordova เป็นการใช้งานฐานข้อมูล sqlite ที่เป็นฐานข้อมูลบน smart phone ที่นิยมใช้กันใน ionic สามารถใช้ ngCordova ในการ install plugin Sqlite เพื่อใช้งานได้ทันทีดังนี้

สร้างโปรเจ็คใหม่ด้วย command prompt

ionic start sqlapp blank

1

ionic start sqlapp blank

cd sqlapp

1

cd sqlapp
ไปที่ folder sqlapp และ open with atom (text editor)
ไปที่ไฟล์ config.xml แก้ไข name กับ widget id
ใช้ bower install ngcordova

bower install -g ngCordova

1

bower install -g ngCordova

หลังจากนั้นให้เปิดไฟล์ index.html และนำ script ng-cordova.js ไปวางไว้ก่อน cordova.js

<script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script>

1

<script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script>

หลังจากนั้นให้เปิดไฟล์ app.js และเพิ่ม ngCordova ในส่วนของ angular.module()

angular.module('starter', ['ionic','ngCordova'])

1

angular.module('starter', ['ionic','ngCordova'])
ลง plugin Sqlite

cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git

1

cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
เปิดไฟล์ app.js กำหนด var db = null; ไว้ด้านบนสุด

ในส่วนของไฟล์ app.js ในส่วนของ $ionicPlatform.ready จะให้สร้าง db และสร้าง table ขึ้นมา

.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
      try {
        db = $cordovaSQLite.openDB({
          name: "my.db",
          location: 'default'
        });
        $cordovaSQLite.execute(db,
          "CREATE TABLE IF NOT EXISTS translog " +
          "(id integer primary key, action text, " +
          "amount integer)"
        );
      } catch (e) {
        alert(e);
      } finally {

      }

      if (window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

.run(function($ionicPlatform, $cordovaSQLite) {

$ionicPlatform.ready(function() {

try {

db = $cordovaSQLite.openDB({

name: "my.db",

location: 'default'

});

$cordovaSQLite.execute(db,

"CREATE TABLE IF NOT EXISTS translog " +

"(id integer primary key, action text, " +

"amount integer)"

);

} catch (e) {

alert(e);

} finally {

}

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

ที่ command prompt สั่ง ionic platform add android
และใช้คำสั่ง ionic run android
พิมพ์คำสั่ง monitor ใน command prompt เพื่อเปิด android monitor
พิมพ์คำสั่ง ionic run android หรือใช้คำสั่ง ionic emulate android
เราสามารถเข้าดู app ของเราใน android monitor ได้จากภาพ และให้เลือก save db ลงมาเพื่อดูว่ามีข้อมูลอะไรบ้าง

แก้ไขไฟล์ 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'
var db = null;
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
      try {
        db = $cordovaSQLite.openDB({
          name: "my.db",
          location: 'default'
        });
        $cordovaSQLite.execute(db,
          "CREATE TABLE IF NOT EXISTS translog " +
          "(id integer primary key, action text, " +
          "amount integer)"
        );
      } catch (e) {
        alert(e);
      } finally {

      }

      if (window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  //*****************COUNT DATA****************
  .controller('MyCon', function($scope, $ionicPlatform, $cordovaSQLite,$interval) {


    $scope.ShowCount = function() {
      /* SELECT COMMAND */
      $cordovaSQLite.execute(db,
        "SELECT count(*) as totaldata FROM translog"
      ).then(
        function(res) {
          if (res.rows.length > 0) {
            alert("have : " + res.rows.item(0).totaldata + " record.");
          }
        },
        function(error) {
          alert(error);
        }
      );

    }

    //*****************GET ALL DATA****************
    $scope.ShowAllData = function() {
      /* SELECT COMMAND */
      $scope.logs = [];
      $cordovaSQLite.execute(db,
        "SELECT * FROM translog ORDER BY id DESC"
      ).then(
        function(res) {
          if (res.rows.length > 0) {
            for (var i = 0; i < res.rows.length; i++) {
              $scope.logs.push({
                id: res.rows.item(i).id,
                action: res.rows.item(i).action,
                amount: res.rows.item(i).amount
              });
            }
          }
        },
        function(error) {
          alert(error);
        }
      );

    }



    //*****************INSERT DATA****************
    $scope.add = function(action, amount) {

      try {
        if (action == 'expense') {
          amount = amount * -1;
        } else {
          amount = amount * 1;
        }

        if (amount != 0) {
          $cordovaSQLite.execute(db,
            "INSERT INTO translog (action, amount) VALUES(?,?)", [action, amount]
          );
        }
        alert("Inserted.");
        $scope.ShowAllData();
      } catch (e) {
        alert(e);
      } finally {

      }








      //$state.go('summary');

    };

    //*****************DELETE DATA****************
    $scope.delete = function(id) {

      try {

        if (id != '') {
          $cordovaSQLite.execute(db,
            "DELETE FROM translog WHERE id=?", [id]
          );
        }
        alert("Deleted.");
        $scope.ShowAllData();
      } catch (e) {
        alert(e);
      } finally {

      }
    };

//$scope.ShowAllData();

$interval($scope.ShowAllData, 2000,1);





  })

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

// 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'

var db = null;

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {

$ionicPlatform.ready(function() {

try {

db = $cordovaSQLite.openDB({

name: "my.db",

location: 'default'

});

$cordovaSQLite.execute(db,

"CREATE TABLE IF NOT EXISTS translog " +

"(id integer primary key, action text, " +

"amount integer)"

);

} catch (e) {

alert(e);

} finally {

}

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

//*****************COUNT DATA****************

.controller('MyCon', function($scope, $ionicPlatform, $cordovaSQLite,$interval) {

$scope.ShowCount = function() {

/* SELECT COMMAND */

$cordovaSQLite.execute(db,

"SELECT count(*) as totaldata FROM translog"

).then(

function(res) {

if (res.rows.length > 0) {

alert("have : " + res.rows.item(0).totaldata + " record.");

}

function(error) {

alert(error);

}

);

}

//*****************GET ALL DATA****************

$scope.ShowAllData = function() {

/* SELECT COMMAND */

$scope.logs = [];

$cordovaSQLite.execute(db,

"SELECT * FROM translog ORDER BY id DESC"

).then(

function(res) {

if (res.rows.length > 0) {

for (var i = 0; i < res.rows.length; i++) {

$scope.logs.push({

id: res.rows.item(i).id,

action: res.rows.item(i).action,

amount: res.rows.item(i).amount

});

}

function(error) {

alert(error);

}

);

}

//*****************INSERT DATA****************

$scope.add = function(action, amount) {

try {

if (action == 'expense') {

amount = amount * -1;

} else {

amount = amount * 1;

}

if (amount != 0) {

$cordovaSQLite.execute(db,

"INSERT INTO translog (action, amount) VALUES(?,?)", [action, amount]

);

}

alert("Inserted.");

$scope.ShowAllData();

} catch (e) {

alert(e);

} finally {

}

//$state.go('summary');

};

//*****************DELETE DATA****************

$scope.delete = function(id) {

try {

if (id != '') {

$cordovaSQLite.execute(db,

"DELETE FROM translog WHERE id=?", [id]

);

}

alert("Deleted.");

$scope.ShowAllData();

} catch (e) {

alert(e);

} finally {

}

};

//$scope.ShowAllData();

$interval($scope.ShowAllData, 2000,1);

})

index.html

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

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller="MyCon">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content >



        <div class="list">
          <a href="#" class="item item-icon-left" ng-repeat="log in logs">
              <h2>{{log.amount}}</h2>
              <p>{{log.action}}</p>
              <button ng-click="delete(log.id)" class="button button-block button-assertive">
                 delete
              </button>
          </a>
      </div>

        <button ng-click="ShowCount()"> Show count</button>
          <button ng-click="ShowAllData()"> Show all data</button>

     <hr/>
     <div class="list">
               <label class="item item-input">
                   <span class="input-label">Insert Amount</span>
                   <input type="number" ng-model="amount">
               </label>
           </div>

           <div class="row">
               <div class="col col-50">
                   <button ng-click="add('income', amount)" class="button button-large button-block button-balanced">
                       Income :)
                   </button>
               </div>
               <div class="col col-50">
                   <button ng-click="add('expense', amount)" class="button button-large button-block button-assertive">
                       Expense :(
                   </button>
               </div>
           </div>

      </ion-content>
    </ion-pane>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="MyCon">

<ion-header-bar class="bar-stable">

<h1 class="title">Ionic Blank Starter</h1>

</ion-header-bar>

<ion-content >

<h2>{{log.amount}}</h2>

<p>{{log.action}}</p>

delete

</button>

</a>

</div>

<button ng-click="ShowCount()"> Show count</button>

<hr/>

<span class="input-label">Insert Amount</span>

</label>

</div>

Income :)

</button>

</div>

Expense :(

</button>

</div>

</ion-content>

</ion-pane>

</body>

</html>

Posted in ionic | Leave a comment

chat

Published July 21, 2016 | By admin

index.html

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

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

        <ion-pane ng-controller="ChatCtrl">


            <ion-header-bar class="bar-stable">

                <h1 class="title">Chat App :)</h1>

            </ion-header-bar>
            <ion-content class="has-footer">
              <div class="list list-inset">
            <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search" ng-model="SearchInput">
            </label>
            </div>
                <div class="list">

                    <a ng-repeat="c in chatLogs | filter : SearchInput" class="item item-icon-left" href="#">
                        <i class="icon {{c.chat_icon}}"></i>
                        <h2>{{c.chat_message}}</h2>
                        <em>{{c.username}}
                            on
                            {{c.chat_date}}</em>
                    </a>

                </div>

            </ion-content>

            <ion-footer-bar class="item-input-inset footer-item-input-insert bar-dark">
                <label class="item-input-wrapper">
                    <input type="text" placeholder="Message" ng-model="newMsg">
                </label>
                <button ng-click="postMsg(newMsg)" class="button button-clear" >
                    Reply
                </button>
            </ion-footer-bar>
        </ion-pane>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above

-->

</head>

<ion-pane ng-controller="ChatCtrl">

<ion-header-bar class="bar-stable">

</ion-header-bar>

<ion-content class="has-footer">

</label>

</div>

<h2>{{c.chat_message}}</h2>

<em>{{c.username}}

{{c.chat_date}}</em>

</a>

</div>

</ion-content>

<ion-footer-bar class="item-input-inset footer-item-input-insert bar-dark">

</label>

</button>

</ion-footer-bar>

</ion-pane>

</body>

</html>

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'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            // Don't remove this line unless you know what you are doing. It stops the viewport
            // from snapping when text inputs are focused. Ionic handles this internally for
            // a much nicer keyboard experience.
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('ChatCtrl', function($scope, $http, $ionicPopup) {

    var icon = 'ion-printer';
    var name = 'Tee';

    var reload = function() {
        $http({
            url: 'http://203.158.144.140/demo_ionic_chat/Home/GetChat'
        }).then(function(res) {
            $scope.chatLogs = res.data;
        });
    }
    $scope.postMsg = function(newMsg) {
        $http.post(
            'http://203.158.144.140/demo_ionic_chat/Home/PostChat',
            {
                'username': name,
                'chat_message': newMsg,
                'chat_icon': icon
            },
            {
                method: 'POST',
                headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'}
            }
        ).then(function(res) {
            //console.log(res);
            $scope.newMsg='';
            reload();
        });
    }

    //init function;
    reload();


})

// 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'

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

if (window.cordova && window.cordova.plugins.Keyboard) {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

// Don't remove this line unless you know what you are doing. It stops the viewport

// from snapping when text inputs are focused. Ionic handles this internally for

// a much nicer keyboard experience.

cordova.plugins.Keyboard.disableScroll(true);

}

if (window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.controller('ChatCtrl', function($scope, $http, $ionicPopup) {

var icon = 'ion-printer';

var name = 'Tee';

var reload = function() {

$http({

url: 'http://203.158.144.140/demo_ionic_chat/Home/GetChat'

}).then(function(res) {

$scope.chatLogs = res.data;

});

}

$scope.postMsg = function(newMsg) {

$http.post(

'http://203.158.144.140/demo_ionic_chat/Home/PostChat',

{

'username': name,

'chat_message': newMsg,

'chat_icon': icon

{

method: 'POST',

headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'}

}

).then(function(res) {

//console.log(res);

$scope.newMsg='';

reload();

});

}

//init function;

reload();

})

Posted in ionic | Leave a comment

ionic command

Published July 19, 2016 | By admin

ionic command จะพิมพ์ใน command prompt (cmd) เพื่อทำงาน โดยมีคำสั่งที่สำคัญดังนี้

1) คำสั่งสร้าง apps

ionic start app1 blank

1	ionic start app1 blank

ตรง app1 คือชื่อ apps ที่จะสร้าง

2) คำสั่งเปิด run serve เพื่อจำลอง app ผ่าน browser เพื่อง่ายต่อการพัฒนา apps เริ่มต้น

ionic serve

1	ionic serve

3) คำสั่งปิด serve กรณีที่ทำแล้วอยากจำลองผ่าน emulator หรือ ผ่าน device จริงจะต้องปิด serve โดยพิมพ์

q

4) ให้ ionic download sources สำหรับใช้งานกับ android device

ionic platform add android

1	ionic platform add android

ให้ ionic download sources สำหรับใช้งานกับ iOS device

ionic platform add ios

1	ionic platform add ios

กรณีที่ error จากการ ใช้คำสั่ง ionic platform add สามารถใช้คำสั่ง remove ได้

ionic platform remove android / ios

1	ionic platform remove android / ios

5) run app

สำหรับ android device / emulator

ionic run android

1	ionic run android

สำหรับ iOS device (จะต้องใช้บน Mac OS และถ้าจะลงเครื่องจริงจะต้องทำผ่าน x code)

ionic build ios

1	ionic build ios

ionic emulator ios

1	ionic emulator ios

6) build icon / splash screen

ionic resources

1	ionic resources

ถ้ารูป icon หรือ splash ไม่เปลี่ยนให้พิมพ์เพิ่ม

ionic resources --icon
ionic resources --splash

1 2	ionic resources --icon ionic resources --splash

Posted in ionic | Tagged ionic command | Leave a comment

ionic ถ้า error update หรือ install version ใหม่ไม่ได้

Published November 20, 2015 | By admin

ionic ถ้า error update หรือ install version ใหม่ไม่ได้ ให้พิมพ์ sudo npm cache clean.

Posted in ionic | Tagged ionic error install & update | Leave a comment

KungTee – So Ku

Technology Web & Application

ionic & ngCordova GPS Map

ngCordova FlashLight

ionic framework & Sqlite & ngCordova

chat

ionic command

ionic ถ้า error update หรือ install version ใหม่ไม่ได้

Recent Posts

Recent Comments

Archives

Categories

April 2021
M	T	W	T	F	S	S
« Jul
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30