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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
ionic template

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionic template

ดูแล้ว 8,930 ครั้ง


เนื้อหาตอนนี้ จะมาดูวิธีการเรียกใช้งาน template หรือการสร้างหน้า app ที่ต้องการด้วย
template เนื้อหาจะขอกระชับ บางส่วน จะไม่อธิบาย ให้ย้อนไปดูตัวอย่างของ
บทความในหมวดก่อนหน้า
 
เพิ่มเติม ในการใช้ angularjs ปกติจะทำการ inject หรือ เรียกใช้ sevice ต่าง
ในรูปแบบนี้
 
1
2
3
4
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",["$scope",function($scope){
 
}]);
 
แต่จะขอใช้เป็นแบบสั้นแทน เป็นแบบ ด้านล่าง 
 
1
2
3
4
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",function($scope){
 
});
 
 
สำหรับใครเพิ่งเข้ามาอ่าน ให้ดูโครงสร้างไฟล์ที่เกียวข้องจากบทความตอนที่ 1
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1 
 
โครงสร้างไฟล์และโฟลเดอร์เริ่มต้น
- \css
- \fonts
- \js
- index.html
- app.js
 
ในตอนนี้จะมีโฟลเดอร์และไฟล์ 3 ไฟล์เข้ามา
- \tpl\welcome.html
- \tpl\aboutus.html
- \tpl\contactus.html
 
1. สเต็บแรก ไฟล์ index.html
app เราจะมี sidemenu ด้านซ้าย เพื่อลิ้งค์ไปดึงไฟล์ template มาแสดง
 
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
31
32
33
34
35
36
37
38
39
40
41
42
<!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
รายละเอียดจะอธิบายในตอนหน้า
 
1
2
3
<ion-nav-bar class="bar bar-header bar-assertive">
<!-- การกำหนด header จะมาแสดงในส่วนนี้แทน-->
</ion-nav-bar>
   
1
2
3
<ion-nav-view animation="slide-in-up">
<!--เนื้อหาใน template จะถูกโหลดมาไว้ในส่วนนี้-->
</ion-nav-view>
 
directive animation มีให้เลือกว่าจะให้มีการเปลี่ยนหน้า templates แบบไหน 
ดูรายการ ทั้งหมดได้ที่
 
 
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 หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย และก็ส่วนของเนื้อหา

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 และก็ส่วนของเนื้อหา

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 และก็ส่วนของเนื้อหา

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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
คำอธิบายแสดงในโค้ด
 
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
31
32
33
34
35
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
 
ยกโค้ดเฉพาะส่วน ion-content ใน slde menu left ในโค้ด index.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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  
 
1
<i class="icon ion-email"></i>
 
ดูไฟล์ icons ทั้งหมดได้ที่ http://ionicons.com/  คลิกที่ รูป จะมีชื่อ icon สามารถนำมาใช้ได้
 
มาดูไฟล์ index.html ตัวสำเร็จ
 
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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 ที่นำมาใช้ในตัวอย่างตอนนี้
รอติดตาม


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







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



Tags:: ionic template







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ