PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน template ใน ionicframework ตอนที่ 4

04 September 2014 By


เนื้อหาตอนนี้ จะมาดูวิธีการเรียกใช้งาน template หรือการสร้างหน้า app ที่ต้องการด้วย
template เนื้อหาจะขอกระชับ บางส่วน จะไม่อธิบาย ให้ย้อนไปดูตัวอย่างของ
บทความในหมวดก่อนหน้า
 
เพิ่มเติม ในการใช้ angularjs ปกติจะทำการ inject หรือ เรียกใช้ sevice ต่าง
ในรูปแบบนี้
 
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",["$scope",function($scope){ 

}]);
 
แต่จะขอใช้เป็นแบบสั้นแทน เป็นแบบ ด้านล่าง 
 
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",function($scope){ 

});
 
 
สำหรับใครเพิ่งเข้ามาอ่าน ให้ดูโครงสร้างไฟล์ที่เกียวข้องจากบทความตอนที่ 1
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1 
http://www.ninenik.com/content.php?arti_id=521 via @ninenik
 
โครงสร้างไฟล์และโฟลเดอร์เริ่มต้น
- \css
- \fonts
- \js
- index.html
- app.js
 
ในตอนนี้จะมีโฟลเดอร์และไฟล์ 3 ไฟล์เข้ามา
- \tpl\welcome.html
- \tpl\aboutus.html
- \tpl\contactus.html
 
1. สเต็บแรก ไฟล์ index.html
app เราจะมี sidemenu ด้านซ้าย เพื่อลิ้งค์ไปดึงไฟล์ template มาแสดง
 
<!DOCTYPE html>
<html ng-app="myIonicApp3"> 
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="css/ionic.css" rel="stylesheet">
        <script type="text/javascript" src="js/ionic.bundle.min.js"></script>  
        <script type="text/javascript" src="app.js"></script>
        <title>My Ionic 3</title>
    </head>
    <body ng-controller="myIonicHome">
  
      <ion-side-menus>  
        <!-- Center content -->  
        <ion-side-menu-content>  
               
            <ion-nav-bar class="bar bar-header bar-assertive">
            </ion-nav-bar>             
            <ion-nav-view animation="slide-in-up">

            </ion-nav-view>
             
        </ion-side-menu-content>  
  
        <!-- Left menu -->  
        <ion-side-menu side="left">  
            <ion-header-bar class="bar bar-header bar-assertive">  
                <h1 class="title">Menu</h1>  
            </ion-header-bar>  
            <ion-content>  

<!-- ส่วนของเนื้อหาเมนูด้านซ้าย      -->
                                                      
            </ion-content>  
        </ion-side-menu>  
  
    </ion-side-menus>  
   
    </body>
</html>
 
เนื่องจากเราจะมีการใช้งาน template ถ้าใน angularjs ก็จะมีการใช้าน ngView directive
แต่สำหรับ ใน ionicframework จะคล้ายๆ กัน แต่ใช้เป็น ionic-nav-view แทน
 
สำหรับ ion-nav-bar จะเป็นส่วนสำหรับให้ใช้กำหนด header ที่อ้างอิงจากไฟล์ template
รายละเอียดจะอธิบายในตอนหน้า
 
<ion-nav-bar class="bar bar-header bar-assertive">
<!-- การกำหนด header จะมาแสดงในส่วนนี้แทน-->
</ion-nav-bar>  
   
<ion-nav-view animation="slide-in-up">
<!--เนื้อหาใน template จะถูกโหลดมาไว้ในส่วนนี้-->
</ion-nav-view>
 
directive animation มีให้เลือกว่าจะให้มีการเปลี่ยนหน้า templates แบบไหน 
ดูรายการ ทั้งหมดได้ที่
http://ionicframework.com/docs/components/#animations
 
 
2. ไฟล์ templates ทั้ง 3 ไฟล์ ในโฟลเดอร์ tpl
เนื่องจากรูปแบบการใช้งาน templates เมื่อมีการกำหนด ion-nav-bar และ ion-nav-view 
ในไฟล์ หลัก index.html ดังนั้นในไฟล์ templates จะมีการกำหนด ส่วนดังต่อไปนี้เพิ่มเติม
รายละเอียดแบบเต็มจะอธิบายในตอนหน้า
<ion-nav-buttons></ion-nav-buttons>
<ion-view></ion-view>
 
ไฟล์ welcome.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย และก็ส่วนของเนื้อหา

<ion-view title="My Ionic 3">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
</ion-nav-buttons>
<ion-content  class="scroll-content ionic-scroll  has-header">  

  
<div class="list card">

  <div class="item item-body">
   <h2>Welcome</h2>
    <p>
    This is welcome.html template
    </p>
  </div>

</div>            
    
</ion-content>   
</ion-view>

 
ไฟล์ aboutus.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย ปุ่มกลับหน้า home และก็ส่วนของเนื้อหา

<ion-view title="About Us">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>    
</ion-nav-buttons>

<ion-content  class="scroll-content ionic-scroll  has-header">  

<div class="list card">

  <div class="item item-body">
   <h2>About Us</h2>
    <p>
      This is aboutus.html template
    </p>
  </div>

</div>   
    
</ion-content>   
</ion-view>

 
ไฟล์ contactus.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย ปุ่มกลับหน้า home และก็ส่วนของเนื้อหา

<ion-view title="Contact Us">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>    
</ion-nav-buttons>
 
<ion-content  class="scroll-content ionic-scroll  has-header">  

<div class="list card">

  <div class="item item-body">
   <h2>Contacuts</h2>
    <p>
      This is contactus.html template
    </p>
  </div>

</div>   
</ion-content>   
</ion-view>
 
3. ไฟล์ app.js
คำอธิบายแสดงในโค้ด
 
angular.module("myIonicApp3", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('intro', {  // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
        url: '/',  // ถ้าลิ้งไปที่ url / 
        templateUrl: 'tpl/welcome.html',  // ให้ไปเรียกไฟล์ welcome.html มาแสดง
        controller: 'welcomeCtrl'  // พร้อมสร้าง controller ชื่อ myIonicHome
    })
     .state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
        url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        controller: 'aboutusCtrl'
    })   
     .state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
        url: '/contactus',
        templateUrl: 'tpl/contactus.html',
        controller: 'contactusCtrl'
    })          
    $urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ  / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ 
.controller("welcomeCtrl",function($scope){ 

})
.controller("aboutusCtrl",function($scope){ 

})
.controller("contactusCtrl",function($scope){ 

})
.controller("myIonicHome",function($scope){ 

});
 
สังเกตว่า เหมือนจะไม่มีการ inject หรือเรียกใช้งาน ngRoute แต่ใจความเป็นจริง
มีการ รวมเข้าไปในส่วนของ ionic แล้ว ในส่วนที่กำหนด ['ionic']
 
 
4. สร้างเมนู ให้กับ sidemenu ด้วย list icons
http://ionicframework.com/docs/components/#item-icons
 
ยกโค้ดเฉพาะส่วน ion-content ใน slde menu left ในโค้ด index.html
 
            <div class="list">
                <a nav-clear menu-close class="item item-icon-left" href="#/">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
                    <i class="icon ion-at"></i>
                    About Us
                </a>
                <a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
                    <i class="icon ion-email"></i>
                    Contact Us
                    <i class="icon ion-ios7-telephone-outline"></i>
                </a>
            </div>          
 
nav-clear คือ กำหนดให้ กดแล้ว ไม่ต้องแสดง animation ในส่วนของ nav-view (มีอธิบายในตอนหน้า)
menu-close คือ ตำกำหนด ให้ปิด slde menu เมื่อเรากด ลิ้งค์เมนูแล้ว
href="#/aboutus" ในส่วนนี้ จะเป็นการกำหนด url ที่เราจะลิ้งค์ไป มีส่วนสำคัญกับที่ต้องเขียนโค้ด
href="#/" กลับหน้าแรก
 
สำหรับ  css class ที่ใช้มีดังนี้
class="item item-icon-left"
item กำหนดเป็น menu item
item-icon-left  กำหนดให้มี icon ด้านซ้ายของ เมนู
 
class="item item-icon-left item-icon-right"
item-icon-right  กำหนดให้มี icon ด้านขวาของเมนู
 
การกำหนด icon จะใช้แท็ก i  
 
<i class="icon ion-email"></i>
 
ดูไฟล์ icons ทั้งหมดได้ที่ http://ionicons.com/  คลิกที่ รูป จะมีชื่อ icon สามารถนำมาใช้ได้
 
มาดูไฟล์ index.html ตัวสำเร็จ
 
<!DOCTYPE html>
<html ng-app="myIonicApp3"> 
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="css/ionic.css" rel="stylesheet">
        <script type="text/javascript" src="js/ionic.bundle.min.js"></script>  
        <script type="text/javascript" src="app.js"></script>
        <title>My Ionic 3</title>
    </head>
    <body ng-controller="myIonicHome">
  
      <ion-side-menus>  
        <!-- Center content -->  
        <ion-side-menu-content>  
               
            <ion-nav-bar class="bar bar-header bar-assertive">
            </ion-nav-bar>             
            <ion-nav-view animation="slide-in-up">

            </ion-nav-view>
             
        </ion-side-menu-content>  
  
        <!-- Left menu -->  
        <ion-side-menu side="left">  
            <ion-header-bar class="bar bar-header bar-assertive">  
                <h1 class="title">Menu</h1>  
            </ion-header-bar>  
            <ion-content>  

            <div class="list">
                <a nav-clear menu-close class="item item-icon-left" href="#/">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
                    <i class="icon ion-at"></i>
                    About Us
                </a>
                <a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
                    <i class="icon ion-email"></i>
                    Contact Us
                    <i class="icon ion-ios7-telephone-outline"></i>
                </a>
            </div>              
                                                      
            </ion-content>  
        </ion-side-menu>  
  
    </ion-side-menus>  
   
    </body>
</html>

 
ผลลัพธ์การทำงาน
 
 
ในตอนหน้า จะมาอธิบาย การทำงานของ navigation ที่นำมาใช้ในตัวอย่างตอนนี้
รอติดตาม



เนื้อหาที่เกี่ยวข้อง



Tags:: template ionic

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง