Interface utilisateur angulaire mobile - Cordova

Cordovaest une plate-forme utilisée pour créer des applications mobiles à l'aide de HTML, CSS et JS. Nous pouvons considérer Cordova comme un conteneur pour connecter notre application Web avec des fonctionnalités mobiles natives. Les applications Web ne peuvent pas utiliser les fonctionnalités mobiles natives par défaut. C'est là que Cordova entre en scène. Il offre un pont pour la connexion entre l'application Web et l'appareil mobile. En utilisant Cordova, nous pouvons créer des applications mobiles hybrides qui peuvent utiliser la caméra, la géolocalisation, le système de fichiers et d'autres fonctions mobiles natives.

Créez un dossier myfirstapp et installez cordova en utilisant la commande ci-dessous. Il installera cordova dans le monde entier.

npm install -g cordova

Ensuite, créez une application de test comme indiqué ci-dessous en utilisant cordova -

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

La commande suivante créera votre application -

testapp

Entrez dans le dossier en utilisant cd testapp.

Ajoutez les plateformes sur lesquelles vous souhaitez diffuser votre application. Les options disponibles sont iOS et Android. Pour l'instant, nous allons ajouter la plate-forme Android en utilisant la commande suivante -

cordova platform add android

Maintenant, installez les packages dont nous avons besoin dans notre projet.

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

Maintenant, l'application de test aura une application de base installée. La structure des dossiers est la suivante -

Cordova crée un www/dossier dans lequel les détails du projet sont stockés. L'index.html est le point de départ. Vous devez conserver vos fichiers css et js danscss/ et js/ Dossiers.

Organisons maintenant l'application d'interface utilisateur angulaire mobile dans la structure illustrée ci-dessus. Nous ajouterons tous les fichiers js et css dans les dossiers js et css comme indiqué ci-dessus.

Fichiers Javascript

Le fichier index.js est créé par cordova. Les détails de index.js sont les suivants -

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

Fichiers CSS

L'index.html ajouté par cordova est le suivant -

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

Maintenant, mettons à jour l' index.html avec l' index.html donné qui contient l'application Mobile Angular UI que nous avons créée.

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

Le code lié à cordova a été laissé à la fin de l'index.html.

Créez home / folder et ajoutez home.html avec les détails suivants -

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

Le fichier js / app.js est le suivant -

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

Nous utiliserons phonegap pour servir l'application dans le navigateur.

↰ Previous page

Interface utilisateur angulaire mobile - Cordova

Fichiers Javascript

Fichiers CSS

Ressources de l'interface utilisateur angulaire mobile

Tutoriel de l'interface utilisateur angulaire mobile