Mobile Angular UI - การพัฒนาแอพ

ในบทนี้เราจะพูดถึงการใช้ AngularJS และ Ionic สำหรับการพัฒนาแอพ

Ionic เป็นเฟรมเวิร์กโอเพนซอร์สที่ใช้สำหรับการพัฒนาแอพพลิเคชั่นมือถือ มีเครื่องมือและบริการสำหรับการสร้าง UI มือถือด้วยรูปลักษณ์ดั้งเดิม เฟรมเวิร์กไอออนิกต้องใช้กระดาษห่อหุ้มแบบเนทีฟเพื่อให้ทำงานบนอุปกรณ์เคลื่อนที่

ในบทนี้เราจะเรียนรู้เพียงพื้นฐานเกี่ยวกับวิธีที่เราสามารถใช้ UI เชิงมุมของไอออนิกและมือถือเพื่อพัฒนาแอปของคุณ

สำหรับรายละเอียดของการอ้างอิงไอออนิก - https://www.tutorialspoint.com/ionic/index.htm.

ในการเริ่มต้นทำงานกับไอออนิกและเชิงมุมเราต้องติดตั้ง Cordova ก่อน คำสั่งมีดังนี้ -

npm install -g cordova

การสร้างการตั้งค่าโครงการโดยใช้ Cordova

สร้างโฟลเดอร์ ionic_mobileui / และในนั้นให้เราสร้างการตั้งค่าโครงการโดยใช้คำสั่งด้านล่าง -

cordova create ionic-mobileui-angularjs

ที่นี่ ionic-mobileui-angularjs คือชื่อแอปของเรา

ตอนนี้ให้เราติดตั้งแพ็คเกจที่เราต้องการในโครงการของเรา รายการได้รับด้านล่าง -

npm install --save-dev angular angular-route mobile-angular-ui @ionic/core

ไฟล์ได้รับการติดตั้งและโครงสร้างโฟลเดอร์ดังแสดงด้านล่าง -

ไฟล์เชิงมุมและไอออนิกทั้งหมดอยู่ภายใน node_modules เราจะใช้ประโยชน์จากไฟล์www/โฟลเดอร์ ดังนั้นจึงย้ายไฟล์ js และ css เชิงมุมและอิออนิกเข้าไปข้างในwww/css/ และ www/js/ โฟลเดอร์

ให้เราแก้ไข index.html ด้วยส่วนประกอบ UI เชิงมุมมือถือและเพิ่ม app.js ใน js/ โฟลเดอร์

index.html

<!DOCTYPE html> 
<!-- 
   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. 
--> 
<html> 

   <head> 
      <!-- 
      Customize this policy to fit your own app's needs. For more guidance, see: 
         https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
      Some notes: 
         * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication 
         * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly 
         * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: 
            * Enable inline JS: add 'unsafe-inline' to default-src 
      --> 
      <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> 
      <meta name="format-detection" content="telephone=no"> 
      <meta name="msapplication-tap-highlight" content="no"> 
      <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"> 
      <link rel="stylesheet" type="text/css" href="css/index.css"> 
      <title>Mobile Angular UI Demo</title> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
      <meta name="apple-mobile-web-app-capable" content="yes" /> 
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> 
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" /> 
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" /> 
      <link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" /> 
      <script src="js/angular.min.js"></script>
      <script src="js/angular-route.min.js"></script> 
      <script src="js/mobile-angular-ui.min.js"></script> 
      <script src="js/ionic.js"></script> 
      <link rel="stylesheet" href="css/app.css" /> 
      <script src="js/app.js"></script> 
      </head> 
      <body ng-app="myFirstApp" ng-controller="MainController"> 
         <!-- Sidebars --> 
            <div class="sidebar sidebar-left"> 
               <div class="scrollable"> 
                  <h1 class="scrollable-header app-name">Tutorials</h1> 
                  <div class="scrollable-content"> <div class="list-group" ui-turn-off='uiSidebarLeft'> 
                  <a class="list-group-item" href="/">Home Page </a> 
                  <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a> 
                  <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a> 
                  <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a> 
                  <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a> 
                  <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a> <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a> 
               </div> 
            </div> 
         </div> 
      </div> 
      <div class="sidebar sidebar-right"> 
         <div class="scrollable"> 
            <h1 class="scrollable-header app-name">eBooks</h1>
               <div class="scrollable-content"> 
                  <div class="list-group" ui-toggle="uiSidebarRight"> 
                     <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a> 
                     <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a> 
                  </div> 
               </div> 
            </div> 
      </div> 
      
      <div class="app"> 
         <div class="navbar navbar-app navbar-absolute-top"> 
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title"> 
               TutorialsPoint 
            </div> 
            <div class="btn-group pull-left"> 
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"> 
                  <i class="fa fa-th-large "></i> Tutorials 
               </div> 
            </div> 
            <div class="btn-group pull-right" ui-yield-to="navbarAction"> 
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"> 
                  <i class="fal fa-search"></i> eBooks 
               </div> 
            </div> 
         </div> 
         <div class="navbar navbar-app navbar-absolute-bottom"> 
            <div class="btn-group justified"> 
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a> 
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a> 
            </div> 
         </div>
         
         <!-- App body --> 
         <div class='app-body'> 
            <div class='app-content'> 
               <ng-view></ng-view> 
            </div> 
         </div> 
      </div><!-- ~ .app -->

      <!-- Modals and Overlays --> 
      <div ui-yield-to="modals"></div> 
      
      <div class="app"> 
         <h1>Apache Cordova</h1> 
         <div id="deviceready" class="blink"> 
            <p class="event listening">Connecting to Device</p> 
            <p class="event received">Device is Ready</p> 
         </div> 
      </div> 
      <script type="text/javascript" src="cordova.js"></script> 
      <script type="text/javascript" src="js/index.js"></script> 
   </body> 
</html>

ทั้งหมด js และ cssไฟล์จะถูกเพิ่มในส่วนหัว โมดูลและคอนโทรลเลอร์ถูกสร้างขึ้นภายใน app.js ดังที่แสดงด้านล่าง -

/* eslint no-alert: 0 */

'use strict';
// 
// Here is how to define your module 
// has dependent on mobile-angular-ui 
// var app=angular.module('myFirstApp', [
   'ngRoute', 
   'mobile-angular-ui' 
]); 
app.config(function($routeProvider, $locationProvider) { 
   $routeProvider 
   .when("/", { 
      templateUrl : "home/home.html" 
   }); 
   $locationProvider.html5Mode({enabled:true, requireBase:false}); 
});
app.directive('dragItem', ['$drag', function($drag) { 
   return { 
      controller: function($scope, $element) { 
         $drag.bind($element, 
            { 
               transform: $drag.TRANSLATE_BOTH, 
               end: function(drag) { 
                  drag.reset(); 
               } 
            }, 
            { 
               sensitiveArea: $element.parent() 
            } 
         ); 
      } 
   }; 
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) { 
   $scope.msg="Welcome to Tutorialspoint!"; 
});

สร้างไฟล์ home / home.html ใน www / โฟลเดอร์ ต่อไปนี้เป็นรายละเอียดใน home.html

<div class="list-group text-center"> 
   <div class="list-group-item list-group-item-home">
      <h1>{{msg}}</h1> 
   </div> 
</div>

ในการเรียกใช้แอปโดยใช้ Cordova ให้ดำเนินการคำสั่งต่อไปนี้ -

cordova platform add browser

จากนั้นดำเนินการคำสั่งด้านล่างเพื่อทดสอบแอปในเบราว์เซอร์ -

cordova run

กด url: http://localhost:8000 ในเบราว์เซอร์เพื่อทดสอบแอป

การเพิ่ม Ionic Component ไปยัง Mobile Angular UI App

เปิด home / home.html เพิ่มเทมเพลตการ์ดไอออนิกต่อไปนี้ -

home / home.html

<ion-card> 
   <ion-card-header> 
      <ion-card-subtitle>Ionic Card</ion-card-subtitle> 
      <ion-card-title>Mobile Angular UI + Ionic</ion-card-title>
   </ion-card-header>

   <ion-card-content> 
      Welcome To TutorialsPoint! 
   </ion-card-content> 
</ion-card>

เมื่อเสร็จแล้วให้หยุด Cordova ให้ทำงานและเรียกใช้อีกครั้ง คุณควรดูรายละเอียดบัตรไอออนิกตามที่แสดงด้านล่าง -

ตอนนี้คุณสามารถสร้างแอพที่คุณเลือกได้โดยใช้ AngularJs, Mobile Angular UI และ Ionic