移动 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
打印页面
上一页
下一页
广告