Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
เริ่มต้น Ionic Framework
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching
www.nextflow.in.th/ionic-framework
www.nextflow.in.th/ionic-framework
User Interface
www.nextflow.in.th/ionic-framework
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Header</h1>
</ion-hea...
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
Button
www.nextflow.in.th/ionic-framework
<ion-content class="padding">
<!-- class="button" -->
<button class="button">
button
</b...
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
List
www.nextflow.in.th/ionic-framework
<ion-content>
<!-- แบบ div a -->
<div class=“list”>
<a href=“#” class=“item”>
</div>
<!-...
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
Ionic Navigation
www.nextflow.in.th/ionic-framework
Single Page
Application
www.nextflow.in.th/ionic-framework
home.html
index.html page2.html
page3.html
www.nextflow.in.th/ionic-framework
State Navigation
www.nextflow.in.th/ionic-framework
ion-nav-bar
ion-nav-view
home.html
user.html
setting.html
www.nextflow.in.th/ionic-framework
stateProvider
www.nextflow.in.th/ionic-framework
HTML
Module
.config( $stateProvider,
$urlRouterProvider )
{
}
www.nextflow.in.th/ionic-framework
stateProvider
• state name
• url
• templateUrl
• Controller
www.nextflow.in.th/ionic-framework
.config(function($stateProvider, $urlRouterProvider) {
…
.state('home', {
url: "/home",
...
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
stateParams
www.nextflow.in.th/ionic-framework
<ion-view>
<a href=“#/user/{{username}}/{{password}}”>
</ion-view>
www.nextflow.in.th/ionic-framework
.config(function($stateProvider, $urlRouterProvider) {
…
.state('user', {
url: “/user/:p...
www.nextflow.in.th/ionic-framework
.controller( … ,
[‘$stateParams’,function($stateParams){
var param = $stateParams.param1...
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
Factory
www.nextflow.in.th/angularjs
.factory( function() {
return {
property : [1,2,3],
method : function() {
}
}
www.nextflow.in.th/ionic-framework
Workshop
www.nextflow.in.th/ionic-framework
ngCordova
www.nextflow.in.th/ionic-framework
ngcordova.com
www.nextflow.in.th/ionic-framework
Workshop
Upcoming SlideShare
Loading in …5
×

เริ่มต้นเรียนรู้ Ionic framework แบบสบายๆ กับโค้ชพล

2,244 views

Published on

Powerpoint ส่วนหนึ่งที่ใช้ประกอบการอบรม "สร้างแอพ iOS และ Android ด้วย HTML5, Angular JS, และ Ionic Framework" โดยโค้ชพล (ธีรเศรษฐ์ จิรภัทร์ชาญเดช) ติดต่อจัดอบรมนอกสถานที่ได้ที่ 083-071-3373 หรือ http://nextflow.in.th/ionic-framework-ios-android-app-training-workshop/

ครอบคลุมเนื้อหาพื้นฐานสำหรับคนทำเว็บ
- Page
- ion-pane
- Button
- Icon
- List
- Plugin ngCordova
- จัดการฐานข้อมูลด้วย SQLite 3
- เช็คตำแหน่ง GPS (Geolocation) เพื่อใช้ในแผนที่ Google Maps
- สร้างแอพแสกนบาร์โค้ด (Barcode Scanner)
- สั่นเครื่อง (Vibration)
- สั่งให้เครื่องร้องเตือน (Beep)

Published in: Technology

เริ่มต้นเรียนรู้ Ionic framework แบบสบายๆ กับโค้ชพล

  1. 1. เริ่มต้น Ionic Framework โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช Technology Coaching www.nextflow.in.th/ionic-framework
  2. 2. www.nextflow.in.th/ionic-framework User Interface
  3. 3. www.nextflow.in.th/ionic-framework <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Header</h1> </ion-header-bar> <ion-content> Hello </ion-content> <ion-footer-bar class="bar-assertive"> <h1 class="title">Footer</h1> </ion-footer-bar> </ion-pane>
  4. 4. www.nextflow.in.th/ionic-framework Workshop
  5. 5. www.nextflow.in.th/ionic-framework Button
  6. 6. www.nextflow.in.th/ionic-framework <ion-content class="padding"> <!-- class="button" --> <button class="button"> button </button> <button class="button button-block"> block button </button> <button class="button button-clear"> Clear button </button> </ion-content>
  7. 7. www.nextflow.in.th/ionic-framework Workshop
  8. 8. www.nextflow.in.th/ionic-framework List
  9. 9. www.nextflow.in.th/ionic-framework <ion-content> <!-- แบบ div a --> <div class=“list”> <a href=“#” class=“item”> </div> <!-- แบบ ul li --> <ul class=“list”> <li class=“item”></li> </ul> </ion-content>
  10. 10. www.nextflow.in.th/ionic-framework Workshop
  11. 11. www.nextflow.in.th/ionic-framework Ionic Navigation
  12. 12. www.nextflow.in.th/ionic-framework Single Page Application
  13. 13. www.nextflow.in.th/ionic-framework home.html index.html page2.html page3.html
  14. 14. www.nextflow.in.th/ionic-framework State Navigation
  15. 15. www.nextflow.in.th/ionic-framework ion-nav-bar ion-nav-view home.html user.html setting.html
  16. 16. www.nextflow.in.th/ionic-framework stateProvider
  17. 17. www.nextflow.in.th/ionic-framework HTML Module .config( $stateProvider, $urlRouterProvider ) { }
  18. 18. www.nextflow.in.th/ionic-framework stateProvider • state name • url • templateUrl • Controller
  19. 19. www.nextflow.in.th/ionic-framework .config(function($stateProvider, $urlRouterProvider) { … .state('home', { url: "/home", templateUrl: "views/home.html", controller: "HomeController" }) // default url $urlRouterProvider.otherwise("/home"); })
  20. 20. www.nextflow.in.th/ionic-framework Workshop
  21. 21. www.nextflow.in.th/ionic-framework stateParams
  22. 22. www.nextflow.in.th/ionic-framework <ion-view> <a href=“#/user/{{username}}/{{password}}”> </ion-view>
  23. 23. www.nextflow.in.th/ionic-framework .config(function($stateProvider, $urlRouterProvider) { … .state('user', { url: “/user/:param1/:param2”, templateUrl: “views/user.html", controller: "UserController" }) // default url $urlRouterProvider.otherwise("/home"); })
  24. 24. www.nextflow.in.th/ionic-framework .controller( … , [‘$stateParams’,function($stateParams){ var param = $stateParams.param1; }])
  25. 25. www.nextflow.in.th/ionic-framework Workshop
  26. 26. www.nextflow.in.th/ionic-framework Factory
  27. 27. www.nextflow.in.th/angularjs .factory( function() { return { property : [1,2,3], method : function() { } }
  28. 28. www.nextflow.in.th/ionic-framework Workshop
  29. 29. www.nextflow.in.th/ionic-framework ngCordova
  30. 30. www.nextflow.in.th/ionic-framework ngcordova.com
  31. 31. www.nextflow.in.th/ionic-framework Workshop

×