移動 Angular UI - Cordova

上一頁
下一頁

Cordova是一個用於使用HTML、CSS和JS構建移動應用程式的平臺。我們可以將Cordova視為連線我們的Web應用程式和原生移動功能的容器。Web應用程式預設情況下無法使用原生移動功能。這就是Cordova發揮作用的地方。它提供了一個連線Web應用程式和移動裝置的橋樑。透過使用Cordova，我們可以建立可以使用相機、地理位置、檔案系統和其他原生移動功能的混合移動應用程式。

建立一個名為myfirstapp的資料夾，並使用下面給出的命令安裝cordova。這將全域性安裝cordova。

npm install -g cordova

接下來，使用cordova建立如下所示的testapp：

D:\myfirstapp>cordova create testapp com.example.testapp HelloWorld

以下命令將建立您的應用程式：

testapp

使用cd testapp進入資料夾。

新增您希望在其上執行應用程式的平臺。可用選項是ios和android。現在，我們將使用以下命令新增android平臺：

cordova platform add android

現在安裝專案中需要的包。

npm install --save-dev angular angular-route mobile-angular-ui

現在testapp將安裝一個基本的應用程式。資料夾結構如下：

Cordova

Cordova建立一個www/資料夾，其中儲存了專案的詳細資訊。index.html是起始點。您需要將css和js檔案儲存在css/和js/資料夾中。

現在讓我們按照上述結構排列移動angular UI應用程式。我們將把所有js檔案和css檔案新增到上面顯示的js和css資料夾中。

Javascript檔案

JavaScript Files

index.js檔案由cordova建立。index.js的詳細資訊如下：

var app={
   // Application Constructor
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },

   // deviceready Event Handler
   //
   // Bind any cordova events here. Common events are:
   // 'pause', 'resume', etc.
   onDeviceReady: function() {
      this.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);
   }
};
app.initialize();

Css檔案

CSS files

cordova新增的index.html如下：

<!DOCTYPE html>
<html>
   <head>
      <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>Hello World</title>
   </head>
   <body>
      <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>

現在讓我們使用給定的包含我們建立的移動Angular UI應用程式的index.html更新index.html。

<!DOCTYPE html>
<html>
   <head>
      <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/mobile-angular-ui.gestures.min.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>

cordova相關的程式碼已保留在index.html的末尾。

建立home/資料夾並新增包含以下內容的home.html：

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

js/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',
   'mobile-angular-ui.gestures'
]);
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!";
});

我們將使用phonegap在瀏覽器中執行應用程式。

mobile_angular_ui_phonegap_and_cordova.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.