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

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <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/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
   <!-- Componente principal de Ionic que cargará la aplicación -->
  <app-root></app-root>
</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.

La etiqueta "<app-root>" 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.

Las librerías JavaScript de Cordova, los CSS de la aplicación y las librerías de Ionic, Angular y de nuestro proyecto con Ionic se insertarán al compilar el proyecto (que se generará en la carpeta www).

PreviousEstructura de carpetas NextAñadir plataformas

Last updated 5 years ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Ionic App</title> <base href="/" /> <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/png" href="assets/icon/favicon.png" />  <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head> <body>  <app-root></app-root> </body> </html>