Formularios, tablas y modelos de datos en Angular

Vitmar Aliaga (@cruzjhonson)

Vitmar Aliaga

@cruzjhonson

Bach. Systems Engineer / Frontend Developer             

Vitmar Aliaga (@cruzjhonson)

Empecemos

Vitmar Aliaga (@cruzjhonson)

Install

Un parentesis

• Instalemos bootstrap para que nuestros formularios queden "bonitos"

npm install --save bootstrap

• Agreguemos boostrap.css en nuestro archivo angular.json

Vitmar Aliaga (@cruzjhonson)

Install

Formularios

Variables locales.

• Son variables que se pueden utilizar dentro del template o la plantilla.
• Pueden hacer referencia a cualquier objeto de un formulario en el template.
• Solo están disponibles en el template. No se pueden utilizar en la clase del componente
• Para asignar una variable, se debe colocar el símbolo de # y el nombre de la variable.

Vitmar Aliaga (@cruzjhonson)

Install

Un objeto

Vitmar Aliaga (@cruzjhonson)

Install

Grupo de objetos

Vitmar Aliaga (@cruzjhonson)

Install

Lazy loading

Carga perezosa

Vitmar Aliaga (@cruzjhonson)

Install

Archivos

• src/: La carpeta donde están los archivos de la aplicación.
  • index.html: Un fichero HTML índice estándar.
  • main.ts: Fichero TypeScript de arranque de la aplicación.
  • app/: La carpeta con el código especifico de tu aplicación.
    • app.module.ts: Las aplicaciones son arboles de módulos, y este es su raíz.
    • app.component.ts Las páginas son árboles de componentes, y este es su raíz.

Vitmar Aliaga (@cruzjhonson)

Install

Archivos

• e2e/: Pruebas end to end, de toda la aplicación.
• node_modules: Paquetes instalados con el gestor de node, npm.
• src/:
  • ​tslint.ts: Configuración personalizada de la aplicación.
  • tsconfig.app.json: Configuración de compilación typescript de la aplicación.
  • styles.scss: Estilos generales de la aplicación
  • polyfills.ts: En angular hay algunas líneas de código que hacen que su aplicación sea compatible con diferentes navegadores.

Vitmar Aliaga (@cruzjhonson)

Install

Vista General

Vitmar Aliaga (@cruzjhonson)

Install

Modulos

Vitmar Aliaga (@cruzjhonson)

Install

Components

Vitmar Aliaga (@cruzjhonson)

Install

Title Text

Github: http://github.com/valiaga

Slides : http://slides.com/vitmaraliaga