Cómo programar con Ionic y Cordova – videotutoriales – episodio 3

En este videotutorial nos adentramos un poco más en la programación a través de Ionic, aquí en concreto aprenderemos a añadir nuevas páginas a nuestro proyecto y también a exportar nuestro proyecto para que, en próximos tutoriales lo podamos utilizar dentro de Ionic.

Crear una página es bastante sencillo. Dentro de la parte izquierda donde tenemos el navegador, si pulsamos en Add Page, lo que va a hacer es añadirnos una nueva página y además nos va a pedir de qué tipo (blanco, un log in de entrada o un sign up).

En esta ocasión vamos a seleccionar página en blanco y vemos que se añade en el navegador con el nombre genérico de Page. En la parte derecha le ponemos un título y automáticamente una vez que hemos creado el nombre de la página (en este caso Mi nueva página) nos va a dar la referencia.

El resto de propiedades son iguales que el resto de las páginas.

A continuación arrastramos un Heading como hemos hecho en alguna otra ocasión y cambiamos el título a Mi primera página nueva para que quede registrado.

El inconveniente que tenemos es que si nos vamos al Tabs controller, veremos que no tenemos un Tab que nos permita asociar esta página que acabamos de crear al Tab.

Por tanto, una vez que hemos pinchado en Tabs controller y clicamos en tabs creamos una nueva pestaña pinchando en la derecha add new tab al tener un nuevo tab creado lo podremos utilizar para añadir nuestra nueva página.

Por defecto, cuando añadimos un tab vemos que nos crea una página nueva, en este caso no nos interesa esta página nueva así que lo vamos a borrar. En tabs comprobamos que se ha creado tab5 y lo vamos a personalizar cambiándole el nombre por Mi página nueva y además le cambiaremos el icono como hemos hecho en anteriores ocasiones.

Si nos vamos abajo podemos observar que ya aparece Mi página nueva. Ya podemos poner un nombre más lógico por ejemplo Mi carrito.