Interfaz de usuario angular móvil - Cordova

Cordovaes una plataforma que se utiliza para crear aplicaciones móviles utilizando HTML, CSS y JS. Podemos pensar en Cordova como un contenedor para conectar nuestra aplicación web con funcionalidades móviles nativas. Las aplicaciones web no pueden utilizar funcionalidades móviles nativas de forma predeterminada. Aquí es donde entra en escena Córdoba. Ofrece un puente para la conexión entre la aplicación web y el dispositivo móvil. Al usar Cordova, podemos crear aplicaciones móviles híbridas que pueden usar cámara, geolocalización, sistema de archivos y otras funciones móviles nativas.

Cree una carpeta myfirstapp e instale cordova usando el comando que se proporciona a continuación. Instalará cordova a nivel mundial.

npm install -g cordova

A continuación, cree una aplicación de prueba como se muestra a continuación usando cordova -

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

El siguiente comando creará su aplicación:

testapp

Ingrese a la carpeta usando cd testapp.

Agregue las plataformas en las que desea servir su aplicación. Las opciones disponibles son ios y android. Por ahora, agregaremos la plataforma Android usando el siguiente comando:

cordova platform add android

Ahora instale los paquetes que necesitamos en nuestro proyecto.

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

Ahora la testapp tendrá instalada una aplicación básica. La estructura de carpetas es la siguiente:

Córdoba crea un www/carpeta donde se almacenan los detalles del proyecto. El index.html es el punto de inicio. Necesita mantener sus archivos css y js encss/ y js/ carpetas.

Organicemos ahora la aplicación de interfaz de usuario angular móvil en la estructura que se muestra arriba. Agregaremos todos los archivos js y css en las carpetas js y css como se muestra arriba.

Archivos javascript

Cordova crea el archivo index.js. Los detalles de index.js son los siguientes:

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

Archivos CSS

El index.html agregado por cordova es el siguiente:

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

Ahora vamos a actualizar el index.html con el index.html dado que tiene la aplicación Mobile Angular UI que hemos creado.

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

El código relacionado con cordova se ha dejado al final del index.html.

Cree la carpeta home / y agregue home.html con los siguientes detalles:

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

El archivo js / app.js es el siguiente:

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

Usaremos phonegap para servir la aplicación en el navegador.

↰ Previous page