Ionic Framework

Desarrollo de App’s Hibridas

 ¿Qué es Ionic Framework?
Ionic es una herramienta, gratuita y open source, para
el desarrollo de aplicaciones híbridas basadas en
HTML5, CSS y JS. Está construido con Sass y
optimizado con AngularJS.

Principales características

Alto rendimiento AngularJS & Ionic Centro nativo Bonito diseño Un potente CLI
Implementación del entorno de desarrollo
1.- Instalación de NodeJS
https://nodejs.org/en/
Implementación del entorno de desarrollo
1.- Instalación de NodeJS
Implementación del entorno de desarrollo
1.- Instalación de NodeJS
Implementación del entorno de desarrollo
2.- Instalación de Angular 4
https://angular.io/guide/quickstart

3.- Instalación de Ionic 3

https://ionicframework.com/docs/intro/installation/
Implementación del entorno de desarrollo
4.- Instalación de Sublime Text
https://www.sublimetext.com/
 Es un framework de desarrollo para JavaScript creado por
Google. La finalidad de Angular es facilitarnos el desarrollo de
aplicaciones web SPA y además darnos herramientas para
trabajar con los elementos de una web de una manera más
sencilla y optima.

¿Que es una aplicación web SPA (single-page application) desarrollada con Angular 5?
Aplicación de página única es una aplicación web o es un sitio
web que cabe en una sola página con el propósito de dar una
experiencia más fluida a los usuarios como una aplicación de
escritorio. En un SPA todos los códigos de HTML, JavaScript, y
CSS se carga de una vez o los recursos necesarios se cargan
dinámicamente como lo requiera la página y se van agregando,
normalmente como respuesta de las acciones del usuario. La
página no tiene que cargar otra vez en ningún punto del
proceso tampoco se transfiere a otra página
Componentes en Angular 5
Los componentes son tan solo una forma de subdividir una
aplicación en pequeñas partes que están conformadas por un
html, css y typescript, y si bien nosotros podemos crear
nuestros propios componentes creando estos archivos, es
mucho más facil si utilizamos el cli de Angular con los
siguientes comandos.
•
ng generate component micomponente el cual permite
crear un componente de manera automática

• ng g c micomponente. que es el mismo comando anterior

solo que escrito de manera abreviada.
Templates y Styling
Recuerda que cada componente esta conformado por un:
• HTML, que es aquí en donde vamos a diseñar nuestra interfaz a través de las
etiquetas, así mismo que podemos utilizar otros componentes que creemos.
• CSS, que es aquí en donde colocaremos tan solo los estilos que afectan al
componente
• Typescript, aunque Angular es un framework de javascript, en realidad usa un
lenguaje basado en javascript, el cual es muy similar tan solo que utiliza tipos de
datos. pero el objetivo de este archivo es almacenar toda la lógica del
componente.
Por lo general empezamos creando nuestro archivo typescript que se encarga de
enlazar estos archivos a través de sus propiedades, las cuales podemos usar para:
los Templates, con templateUrl, que recibe la dirección del html y template, que
recibe un string con lo que tiene que renderizar en pantalla.
Los estilos, con styles el cual recive un arreglo de string, en el que cada string puede
contener nuestros estilos css, o styleUrls el cual recibe la dirección del Css a enlazar.
Data Binding
Data binding hace referencia a la manera en la que los datos se comportan de
acuerdo a la interacción del usuario, y tenemos las siguientes formas de data
binding.
Interpolación es la manera en la que la clase comunica datos al template a
traves de {{}}
property binding, es la manera en la que podemos enlazar datos sin utilizar las
llaves y usando los corchetes [] en las propiedades de las etiquetas html,
directivas o componentes por ejemplo [value]="somevariable"
event binding hasta este punto tan solo enlazamos datos, si queremos utilizar
los eventos de los componentes podemo usar los dentro de los parentesis y el
nombre del evento, por ejemplo: (click)="miMetodo()"
two way data binding. con las opciones anteriores tan solo enviamos datos
desde el componente al template, pero si queremos que nuestra template
tambien actualice el componente entonces podemos usar el doble enlaze de
datos a traves de ngModel, pero para utilizarlo debemos primero importar el
modulo FormsModule: import { FormsModule } from '@angular/forms'; y
agregarlo a la sección de imports.
Crear una carpeta en el escritorio e ingresar
desde ‘cmd’ a ella.
Creamos un proyecto nuevo llamado “projectAngular”
Paginas, Rutas y Modelo.
> cd src\app\pages\ (crear la carpeta ‘pages’ previamente)

> ng g componet saludo

Creamos el archivo app.routes.ts dentro de src/app

Paginas, Rutas y Modelo.
Importación desde el modulo de angular
Importación del componente nuevo

Asignación de rutas

Exportación de rutas, ‘true’ vista del ‘#’

antecediendo a las rutas
Verificar en app.module.ts

Se importo las rutas

Se importo el nuevo componente

Se declaro para su correcta exportación

Comentar e código que viene por defecto y agregar las etiquetas de ruteo.

Regresar a ‘cmd’ e
iniciar:
> ng serve --open
Ejercicios:
Tipos de variables: Number, String, Array.
Ciclo ngFor.
GlobalService.
Enviar mensaje
No olidar instalar extension: Allow-Control-Allow-Origin
Ionic 3
1.- Crear proyecto en blanco
Ionic 3
1.- Crear proyecto en blanco
> ionic start myApp blank
> cd myApp
> ionic serve
Ionic 3
1.- Repaso de variables.
2.- Ejercicio con recursividad (Factorial)
Ionic 3
Ejercicio con recursividad (Factorial)

myApp/src/Pages/Inicio.ts
Ionic 3
Ejercicio con recursividad (Factorial)

myApp/src/app/app.component.ts
Ionic 3
Nuevo proyecto

Salir del proyecto y generamos otro con un menú

Ionic 3
Nuevo proyecto
Ejercicio: Calculo de eficiencia