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.

Como ya hemos dicho todo el código de la aplicación lo encontraremos dentro de la carpeta www. 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 Javascript. El fichero más importante y principal es index.html, el cual iniciará la carga de la aplicación y definirá el contenido principal. A continuación se incluye el código básico que Ionic utiliza por defecto para este fichero:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
            user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>

  </body>
</html>

En primer lugar, en la sección head de este código, se cargan todas las dependencias necesarias:

  • lib/ionic/css/ionic.css: Primero carga la hoja de estilo de Ionic, la cual aplicará los estilos visuales a los componentes.

  • css/style.css: Esta hoja de estilo se incluye por defecto vacía para que escribamos en ella nuestros estilos CSS personalizados.

  • lib/ionic/js/ionic.bundle.js: Librería JavaScript de Ionic y AngularJS.

  • cordova.js: API JavaScript de Cordova.

  • js/app.js: En este fichero se inicializa el módulo de Angular que gestionará la aplicación.

Si buscáis el fichero cordova.js dentro de la carpeta www no lo encontraréis. Esto es porque se incluirá después al compilar o emular.

A continuación en el body se define la aplicación de AngularJS a utilizar (ng-app="starter"). Este código asigna el módulo que hemos definido en app.js llamado starter para que gestione el contenido de la página. De esta forma ya podemos utilizar AngularJS para crear todo el contenido dinámico de la página.

Dentro del body se incluye un panel que contiene una cabecera (con el texto "Ionic Blank Starter") y una sección de contenido vacío.

En Ionic, la forma de incluir componentes es mediante el uso de clases CSS sobre etiquetas HTML o mediante el uso de directivas de AngularJS (permiten definir bloques de código HTML con estilos y funcionalidad asociada). En este caso se utilizan las directivas ion-pane, ion-header-bar y ion-content.

Ahora que ya sabemos por donde empezar en las siguientes secciones vamos a ver los componentes de interfaz de usuario que incluye Ionic y que podemos utilizar para crear nuestra aplicación.

PreviousEstructura de carpetasNextComponentes

Last updated