Código básico

Al crear un nuevo proyecto de Ionic (usando la plantilla blank) se nos crea una aplicación de ejemplo con el contenido mínimo: una pantalla en blanco. Esta es la mejor opción para empezar a trabajar y añadirle los componentes que nosotros queramos o necesitemos. Sin embargo, si estamos seguros de que vamos a utilizar el sistema de navegación tabs o sidebar podremos utilizar esas plantillas, con lo que nos ahorraremos escribir algo de código.

Como ya hemos dicho, todo el código de la aplicación lo encontraremos dentro de la carpeta src. Puesto que las apps de Ionic son básicamente páginas web, aquí dentro se incluirán carpetas y ficheros para almacenar código HTML, CSS y TypeScript (un superset de Javascript, como ya veremos).

El fichero principal es index.html, el cual iniciará la carga de la aplicación y definirá el contenido a incluir. A continuación se incluye el código básico que Ionic utiliza por defecto para este fichero:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, 
     initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Librería de Cordova -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">
</head>
<body>
  <!-- Componente principal de Ionic que cargará la aplicación -->
  <ion-app></ion-app>

  <!-- Los siguientes ficheros se generan durante la compilación -->
  <!-- con el contenido de las librerías y de la propia aplicación. -->
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>
  <script src="build/main.js"></script>
</body>
</html>

En este código inicialmente se configuran una serie de metadatos, como el viewport para ajustar el tamaño de la aplicación a la pantalla del dispositivo, a continuación se carga la librerías JavaScript de Cordova, los CSS de la aplicación, y la librerías Ionic, Angular y de nuestro proyecto con Ionic. Hay archivos que carga pero que no se encuentran en la carpeta de desarrollo, esto es porque se generan tras la compilación (como los CSS y JavaScript de las carpetas build).

La etiqueta "<ion-app>" es la que inicia la aplicación, insertando en ese punto el contenido del componente principal, el cual contiene el menú de navegación y carga el resto de páginas.

PreviousEstructura de carpetas NextAñadir plataformas

Last updated 5 years ago

Was this helpful?

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">  <script src="cordova.js"></script>  <link href="build/main.css" rel="stylesheet"> </head> <body>  <ion-app></ion-app>   <script src="build/polyfills.js"></script> <script src="build/vendor.js"></script> <script src="build/main.js"></script> </body> </html>