Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
เริ่มต้น 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
Próxima SlideShare
Cargando en…5
×

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

2.245 visualizaciones

Publicado el

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)

Publicado en: Tecnología

เริ่มต้นเรียนรู้ 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

×