Interfaccia utente angolare mobile - Cordova

Cordovaè una piattaforma utilizzata per la creazione di app mobili utilizzando HTML, CSS e JS. Possiamo pensare a Cordova come a un contenitore per connettere la nostra app Web con funzionalità mobili native. Le applicazioni Web non possono utilizzare le funzionalità mobili native per impostazione predefinita. È qui che entra in gioco Cordova. Offre un bridge per la connessione tra l'app Web e il dispositivo mobile. Utilizzando Cordova, possiamo creare app mobili ibride che possono utilizzare fotocamera, geolocalizzazione, file system e altre funzioni mobili native.

Crea una cartella myfirstapp e installa cordova utilizzando il comando indicato di seguito. Installerà cordova a livello globale.

npm install -g cordova

Quindi crea un testapp come mostrato di seguito usando cordova -

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

Il seguente comando creerà la tua app:

testapp

Entra nella cartella usando cd testapp.

Aggiungi le piattaforme su cui desideri offrire la tua app. Le opzioni disponibili sono iOS e Android. Per ora, aggiungeremo la piattaforma Android utilizzando il seguente comando:

cordova platform add android

Ora installa i pacchetti di cui abbiamo bisogno nel nostro progetto.

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

Ora il testapp avrà un'app di base installata. La struttura delle cartelle è la seguente:

Cordova crea un file www/cartella in cui sono memorizzati i dettagli del progetto. Index.html è il punto di partenza. Devi mantenere i tuoi file css e js in formatocss/ e js/ cartelle.

Organizziamo ora l'app UI angolare mobile nella struttura mostrata sopra. Aggiungeremo tutti i file js e css nelle cartelle js e css come mostrato sopra.

File Javascript

Il file index.js viene creato da cordova. I dettagli di index.js sono i seguenti:

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();

File CSS

Il index.html aggiunto da cordova è il seguente:

<!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>

Ora aggiorniamo index.html con il dato index.html che ha l'app Mobile Angular UI che abbiamo creato.

<!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>

Il codice relativo a cordova è stato lasciato alla fine di index.html.

Crea home / cartella e aggiungi home.html con i seguenti dettagli:

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

Il file js / app.js è il seguente:

/* 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!";
});

Useremo phonegap per servire l'app nel browser.

↰ Previous page

Interfaccia utente angolare mobile - Cordova

File Javascript

File CSS

Risorse per l'interfaccia utente angolare mobile

Tutorial sull'interfaccia utente angolare mobile