ไฟล์เริ่มต้น ionic framework ใช้งานร่วมกับ phonegap ตอนที่ 6

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
ionicframework phonegap

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

ดูแล้ว 7,431 ครั้ง




เนื้อหาต่อเนื่องจากตอนที่ 5
 
phonegap กับการใช้งาน ionic framework ตอนที่ 5 
 
เปิดไฟล์ index.html จากนั้น ให้ลบ โค้ดทั้งหมดออกไป
แล้วแทนที่ด้วยรูปแบบ โค้ดเริ่มต้น ตามด้านล่าง
 

<!DOCTYPE html>
<html ng-app="myIonicApp">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!--        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
        <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.js"></script>     
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
        <title>MyIonicApp 1</title>
    </head>
    <body ng-controller="myIonicHome">

    </body>
</html>
 
 
โค้ดเริ่มต้น ด้านบน เราจะใช้เป็นต้นแบบ สำหรับการเริ่ม project ใหม่ ๆ
สังเกตในส่วนของ html จะมี attribute คล้ายๆ เป็น namespace สำหรับ ใช้
อ้างอิงใน angularjs และในส่วนของ body ก็มีเหมือนกัน ค่อยศึกษาไปพร้อมกัน
 
โดยในโค้ดเริ่มต้น จะดึง ไฟล์ตางๆ ที่จำเป็นต้องใช้ ทั้งที่เป็น css และ javascript
รวมถึวการกำหนด การแสดงผล meta name="viewport"  และก็มี comment แจ้งเตือน
สำหรับการกำหนดค่า ใน ios7 ส่วนตรงนี้ไม่มีผลกับ android ทั้งไว้หรือลบออกก็ได้ 
 
** หมายเหตุ อย่าลืมว่า ขณะเราเริ่มต้นเขียนโค้ด เราต้อง run phonegap developer
ผ่านมือถือ หรือ emulator ไปพร้อมๆ ด้วย ในที่นี้ไม่ได้เขียนอธิบายไว้
ให้ดูวิธีการได้ที่ ตอนที่ 3
 
phonegap สร้าง project แรก กับ HelloWorld ตอนที่ 3 
 
 
 
จากโค้ดด้านบน จะเป็นหน้าเปล่าๆ ว่าง 
แล้วจะไปยังไงต่อ ไม่เคยใช้งาน ionic framework มาก่อน 
ง่ายๆ เลย copy and paste 
(คำสั่ง tools หรือแม้แต่การเรียกใช้งาน สมัยนี้มีเยอะมาก จำไม่ไหว)
 
เราจะเพิ่ม header content และ footer ให้ งานของเรา
ไปที่ header ก่อน
 
// ณ ตอนเขียนเนื้อหา url ด้านบน ยังใช้ได้


myionic1-7
 
เราจะเอา header สีน้ำเงิน เน้นสีสันหน่อย จะได้สะดุด

<div class="bar bar-header bar-positive">
  <h1 class="title">My Home Ionic</h1>
</div>
 
เปลี่ยน title จะได้รู้สึกว่าได้เขียนอะไรบ้าง
เอาโค้ดนี้แทรก ต่อเข้าไปใน body
 
 
 
ต่อมาข้ามมาส่วนของ footer ก่อน 
 
// ณ ตอนเขียนเนื้อหา url ด้านบน ยังใช้ได้
 
<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>
 
เอาไปวางใกล้ กับ ปิด body 
จะได้รูปแบบตามรูป
 
myionic1-8


 
และอีกส่วนสำคัญ ส่วนของเนื้อหา ส่วนนี้ จะมีการใช้งาน
หรือการปรับแต่งค่อนข้างมาก ในที่นี้ จะเป็นตัวอย่างการนำมาใช้
แบบง่ายก่อน
 
รวมทั้ง จะเริ่มต้น ใช้งาน angularjs อย่างง่ายด้วย
 
        <ion-content>
                <br>
                <br>
                <br>

                <div style="margin:auto;text-align:center;">
                {{greeting}}
                </div>
                
                <br>
        </ion-content>
 
เมื่อแทรกโค้ดในส่วนของเนื้อหาเข้าไป จะได้ ดังรูปด้านล่าง 

myionic1-9
 
จะเห็นว่าเรามีกำหนดรูปแบบ คล้ายกับ template สำหรับแสดงข้อความ โดยใช้
 
{{greeting}}
 
ไฟล์ index.html ทั้งหมด

<!DOCTYPE html>
<html ng-app="myIonicApp">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<!--        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
        <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.js"></script>     
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
        <title>MyIonicApp 1</title>
    </head>
    <body ng-controller="myIonicHome">
    
        <div class="bar bar-header bar-positive">
          <h1 class="title">My Home Ionic</h1>
        </div>


        <ion-content>
                <br>
                <br>
                <br>

                <div style="margin:auto;text-align:center;">
                {{greeting}}
                </div>
                
                <br>
        </ion-content>

    <div class="bar bar-footer bar-balanced">
      <div class="title">Footer</div>
    </div>
        
    </body>
</html>


 
ต่อไป เราจะใช้งาน angularjs พี่สั่งให้ ข้อความตรง template แสดงค่าตามที่เรากำหนด
ในที่นี้จะให้แสดงคำว่า Hello World
 
ให้เราเปิดไฟล์ index.js ในโฟลเดอร์ js
 
เลื่อนมาด้านล่างสุด ไม่ต้องสนใจโค้ดก่อนหน้า
จากนั้นให้เพิ่มโค้ด ต่อไปนี้ต่อเข้าไปด้านล่าง
 
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) {
 $scope.greeting="Hello World";
});
 
ไฟล์ index.js ทั้งหมด
 
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) {
    $scope.greeting="Hello World";
});

 
 
ผลลัพธ์ที่ได้ ตามรูป ค่า {{greeting}} จะถูกเปลี่ยนเป็น Hello World

myionic1-10
 
จะค่อยอธิบาย และศึกษา angularjs ไปพร้อมๆ กับ เนื้อหาในตอนหน้า
สำหรับตอนนี้ แค่นี้ก่อน


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











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ