Files
freeCodeCamp/guide/spanish/ionic/hello-world-in-ionic/index.md
Wizzac a5b247050a Traduccion de tutorial y adaptacion (#25759)
Una traduccion mas fiel al idioma español y clarificacion en la redaccion
2019-08-12 09:08:23 -07:00

1.7 KiB

title, localeTitle
title localeTitle
Hello World In Ionic Hola mundo en Ionic

Hola mundo en Ionic !!

Este es el tutorial que lo guiará para hacer un simple programa Hola Mundo en Ionic.

Pasos

1. Instale ionic , npm , angular y cordova si no está instalado. [Vea la primera introducción para obtener más información]

sudo apt-get install nodejs 
 sudo apt-get install npm 
 sudo npm install -g ionic cordova 

2. Crea una carpeta llamada helloworld

ionic start helloworld blank 

Nota: Como este es un proyecto pequeño, ingrese No o N cuando se le solicite durante la ejecución del programa.

3. Cambie el directorio a helloworld [este es su directorio iónico]

cd helloworld 

4. Abra la carpeta en su editor de texto. Verá varios archivos y subcarpetas.

No entre en pánico, estos archivos se generan automáticamente por npm para usted. Solo vaya a src -> page -> home -> home.html .

5. Formato de archivo básico

`home.html` Es la página html donde puede escribir código con notacion html.<br/> 
 
 `home.scss` Es la página css donde puede escribir código con sintaxis css.<br/> 
 
 `home.ts` es la pagina typescript donde puede escribir codigo typescript. 

6. Elimine la plantilla y agregue la sintaxis html como se muestra en la imagen.


 <ion-header> 
  <ion-navbar> 
    <ion-title> 
      Proyecto de Ionic 
    </ion-title> 
   </ion-navbar> 
  </ion-header> 
 
  <ion-content padding> 
   <h2>Hola Mundo</h2> 
  </ion-content> 

7. Guardar el código y ejecutar


ionic serve

8. Para ver su código ejecutándose, vaya al navegador y abra localhost: 8100 en la url.