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)

1. เริ่มต้น Ionic Framework
โดย ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Technology Coaching
www.nextflow.in.th/ionic-framework

2. www.nextflow.in.th/ionic-framework
User Interface

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. www.nextflow.in.th/ionic-framework
Workshop

5. www.nextflow.in.th/ionic-framework
Button

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. www.nextflow.in.th/ionic-framework
Workshop

8. www.nextflow.in.th/ionic-framework
List

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. www.nextflow.in.th/ionic-framework
Workshop

11. www.nextflow.in.th/ionic-framework
Ionic Navigation

12. www.nextflow.in.th/ionic-framework
Single Page
Application

13. www.nextflow.in.th/ionic-framework
home.html
index.html page2.html
page3.html

14. www.nextflow.in.th/ionic-framework
State Navigation

15. www.nextflow.in.th/ionic-framework
ion-nav-bar
ion-nav-view
home.html
user.html
setting.html

16. www.nextflow.in.th/ionic-framework
stateProvider

17. www.nextflow.in.th/ionic-framework
HTML
Module
.config( $stateProvider,
$urlRouterProvider )
{
}

18. www.nextflow.in.th/ionic-framework
stateProvider
• state name
• url
• templateUrl
• Controller

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. www.nextflow.in.th/ionic-framework
Workshop

21. www.nextflow.in.th/ionic-framework
stateParams

22. www.nextflow.in.th/ionic-framework
<ion-view>
<a href=“#/user/{{username}}/{{password}}”>
</ion-view>

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. www.nextflow.in.th/ionic-framework
.controller( … ,
[‘$stateParams’,function($stateParams){
var param = $stateParams.param1;
}])

25. www.nextflow.in.th/ionic-framework
Workshop

26. www.nextflow.in.th/ionic-framework
Factory

27. www.nextflow.in.th/angularjs
.factory( function() {
return {
property : [1,2,3],
method : function() {
}
}

28. www.nextflow.in.th/ionic-framework
Workshop

29. www.nextflow.in.th/ionic-framework
ngCordova

30. www.nextflow.in.th/ionic-framework
ngcordova.com

31. www.nextflow.in.th/ionic-framework
Workshop