Construye una aplicación de diseño de material con 2

El material angular es un marco de componentes de la interfaz de usuario que implementa la especificación de diseño de materiales de Google para Angular 2, la implementación más rápida y más rápida de la escritura, escrita en TypeScript. Aunque aún en alfa, el material angular ya proporciona un conjunto de componentes de UI reutilizables y accesibles según el diseño del material.

Angular 2 en sí está diseñado para su uso en todas las plataformas (web, móvil y escritorio), y tiene muchas tecnologías nuevas asociadas con ella. En el nivel de JavaScript, tenemos la sintaxis adicional de Ecmascript 2015 (ES6), la tipificación y el soporte de la interfaz de TyperScript, junto con decoradores de la API de reflexión de metadatos. Utiliza observables de la biblioteca de extensiones reactivas para administrar secuencias de eventos en una forma de programación funcional. Utiliza zonas para encapsular e interceptar la actividad asíncrona para proporcionar una forma de almacenamiento local de hilos, lo que permite a la angular responder automáticamente a los cambios de datos en eventos asíncronos para mantener los enlaces de datos. Finalmente, la carga del módulo es manejada por SystemJS.

En este tutorial, vamos a usar Angular 2 para crear una aplicación simple de hacer con algunos elementos de diseño de material de firma. Obtenga los archivos de origen aquí .

Configurar

Configurar el entorno inicial puede ser difícil. Hay un angular2-semilla disponible, así como un Angular2-Starter . Sin embargo, hay algo aún mejor: con angular Puede configurar su proyecto angular 2 con un solo comando.

No solo se encargará de la configuración de todas las tecnologías que mencioné en la última sección (a través del nodo y la NPM), también agregará en el andamio para pruebas de la unidad de jazmín, pruebas de extremo a extremo a extremo, además de las pruebas de tvinta, y Análisis de código estático de Codyelyzer de 2 tiposcript angular. Aunque no tiene que usar todos estos, definitivamente debería. Es tan sencillo de usar, te preguntarás cómo se lo llevó, sin él.

CLI angular está disponible como un paquete NPM, por lo que deberá instalar Nodo y NPM a nivel mundial en su máquina usando NPM install -g angular-cli . Ahora crea una nueva aplicación angular 2 con ng nuevo material2-do . Tendrás que esperar un poco, porque después de que genera los archivos necesarios, inicializa un repo de git y hace un NPM Install Para descargar todos los módulos necesarios en nodo_modules / . Echar un vistazo a la Package.json y familiarizarse con los módulos y guiones allí.

Ahora ha creado una nueva aplicación angular 2 que sigue las mejores prácticas oficiales.

Añadir diseño de material

La aplicación predeterminada no conoce nada sobre el diseño del material (una supervisión que estoy seguro), por lo que tenemos que agregarlo nosotros mismos.

Hay una lista de paquetes de diseño de material angular 2 publicado en el @ Material angular2 Biblioteca. En este ejemplo vamos a usar. centro (requerido para todas las aplicaciones de material angular 2), así como botón De tarjeta De caja De icono De aporte De lista y barra de herramientas :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Para que el paquete de vendía funcione, necesitamos agregar @ Angular2-Material / ** / * a la matriz de vendornpmfiles en angular-cli-build.js . También necesitamos agregar el camino a @ Material angular2 hacia mapas objeto:

 Const Map: CUALQUIER = {
  '@ Angular2-Material': 'Vendor / @ Angular2-Material'
}; 

Deje que SystemJS sepa cómo procesar nuevos módulos al señalar los archivos principales de cada uno de los paquetes:

 Paquetes Const: cualquier = {};

// Coloque los nombres de cualquiera de sus componentes de material aquí
Const MaterialPkgs: String [] = ['Core', 'Botón', 'Tarjeta', 'Checkbox',
'Icono', 'Entrada', 'Lista', 'Barra de herramientas'];

MaterialPkgs.Foreach ((PKG) = & gt; {
  Paquetes [`@ Angular2-Material / $ {PKG }`] = {Main:` $ {pkg} .js`};
}); 

Ahora es el momento de cargar la fuente del icono de diseño de material en el de src / index.html . Cualquier fuente funcionará, pero estamos utilizando los iconos de diseño de materiales estándar:

 & lt; link href = "https://fonts.googleapis.com/icon?family=material+icons" rel = "Stylesheet" & gt; 

Crea un diálogo MD

Ahora podemos trabajar con diseño de material en nuestra aplicación para hacer. ¡Uno de los componentes que faltan actualmente en el diseño de material angular 2 es un indicador o diálogo, por lo que para nuestra primera tarea haremos uno!

Vamos a crear un nuevo componente usando una tarjeta de diseño de material, una barra de herramientas, una entrada y un par de botones. En el src / aplicación Carpeta de su repo, escriba NG Generar diálogo de componentes . Esto genera un nuevo Dialogcomponente en SRC / APP / DIÁLOGO y agrega un barril a System-config.ts Así que Systemjs sabe cómo cargarlo.

Si miras a la generada dialog.component.ts Archivo, verá la primera línea es: Importar {componente, ONINIT} desde '@ angular / núcleo'; . Componente es uno de los principales bloques de construcción de angular, y Oninit Es una de las interfaces que implementa. Sin embargo, para tener acceso a la comunicación entre componentes anidados, así como los componentes de diseño de materiales mencionados anteriormente, necesitamos importar la entrada, Producción y Eventemitter desde @ angular / núcleo; y Mdcard De Mdinput De Mdtoolbar y Mdbutton de sus módulos correspondientes en el @ angular2- material Biblioteca.

Para representar estos componentes materiales, debemos inyectar las directivas nuestra Dialogcomponente requiere. Añadiremos las siguientes directivas a la @Components Metadatos:

 Templateurl: 'dialog.component.html',
Directivas: [MDCARD, MDTOOLBAR, MDINPUT, MDBUTTON],
STYYURLS: ['Dialog component.css'] 

Luego declaramos una serie de @Aporte variables ( oktext De canceltxt y así sucesivamente) que nos permiten definir los contenidos del diálogo. También necesitamos agregar uno. @Producción Emisor que nos permite activar una función con un valor en el componente principal cuando se cierra el cuadro de diálogo.

Ahora podemos reemplazar al constructor generado en dialog.component.ts Con el siguiente código:

 Constructor () {
 este.Oktext = 'OK';
 esto.cancelt = 'Cancelar';
}

emitvalue (valor) {
 esto.ValueMited.Emit (valor);
} 

Así como usar el @Aporte variables dentro de nuestro Dialogcomponente dentro de dialog.component.html plantilla, el entrada md Nos permite aceptar la entrada del usuario:

 & lt; MD-INPUT CLASS = "Full-WIDHTHTH" [Placeholder] = "Placeholder"
        [(ngmodel)] = "valor" #dialoginput
        (KeyUp.enter) = "EmitValue (valor)"
        (keyUp.escape) = "emitvalue (null)" & gt; & lt; / md-input & gt; 

los botones MD Permita que el usuario haga clic en 'Aceptar', 'Cancelar' o lo que decida etiquetar estos botones:

 & lt; Botón MD-BOTON (clic) = "Emitvalue (null)" color = "primario" & gt;
  {{canceltxt}}
& lt; / Button & GT;
& lt; botón MD-Raised-Button (clic) = "Emitvalue (Value)" color = "primario" & gt;
  {{oktext}}
& lt; / Button & GT; 

Observe la tecla Arriba Manipuladores de eventos, que se ocupan de las cosas cuando se presiona la tecla Enter o Escape. Estos manejadores son idénticos a la hacer clic manejadores de eventos para canceltxt y oktext . Escape hace lo mismo que cancelar (emitvalue (null)) y ingresar al ingreso tendrá el mismo resultado que hacer clic en Aceptar (Emitvalue (valor)) . Esto nos permite solicitar al usuario una valor a través de un entrada md y recibir salida emitida.

Podemos ver ejemplos de varios componentes de diseño de materiales: tarjeta MD De botón MD , etcétera. También necesitamos agregar algunos CSS en dialog.component.csss Para lograr el diseño que deseamos, puede ver el código completo en el repositorio GitHub acompañante.

Ahora vamos a añadir esto Dialogcomponente a Material2-do.component.html Para ver cómo se ve:

 & lt; APP-Dialog [TITULT] = "'Solicitud de diálogo'"
  [Plantilla] = "'Este es nuestro nuevo componente basado en diseño de material:'"
  [Placeholder] = "'Ingrese el texto aquí'"
  [OkText] = "'Sí'"
  [CancelText] = "'No'"
  [Valor] = "'TEXTO INICIO'"
  (valorado) = "log ($ evento)"
  [ShowPrOMPT] = "VERDADERO" & GT;
& lt; / app-dialog & gt; 

AVISO Tenemos cuerdas literales para todos los @Inputs . Estos requieren que usemos comillas simples y dobles, de lo contrario, la angular interpretaría los contenidos como un nombre de variable en el Componente alcance.

También tenemos el emitido. @Producción . Esto hace que el diálogo sea simple y extremadamente configurable. La mayoría de las entradas se habrían incumplido para vaciar las cadenas si se omiten.

Vamos a modificar Material2Docomponente . Necesitamos importar el dialogcomponent y declararlo como una directiva, de lo contrario Material2Docomponente No podrá hacerlo. También agregaremos la función de registro:

 Log (texto) {
   console.log (texto);
 } 

Echemos un vistazo a nuestra obra. Puede servir la aplicación (el puerto predeterminado es 4200) ejecutando NPM Start-Script Start , que a su vez corre servidor ng . Si abre la consola, puede ver lo que se registra: se emiten los contenidos de la entrada cuando hace clic en 'Sí', y nulo se emite cuando hace clic en 'No'.

Ahora estamos listos para usar este nuevo Dialogcomponente Para crear nuestra aplicación para hacer.

Crea la aplicación principal

Vamos a utilizar los siguientes componentes MD para la aplicación principal: barra de herramientas De lista De artículo de lista De caja De botón De icono De Registro de iconos , y su dependiente, Http_provider , de la biblioteca HTTP angular. Así que estos deben ser agregados a la sección de importación de Material2Docomponente .

Una vez más, para poder hacer estos componentes, debemos incluirlos en el @Components metadatos directivas matriz junto con Dialogcomponente , que acabamos de agregar:

 Directivas: [MDCARD, MDTOOLBAR, MDLIST, MDLISTITEM, MDCHECKBOX, MDBUTTON, MDICON, DialogComponent], 

Para acceder a la MDiconregistry , tenemos que inyectarlo, junto con Http_providers , mediante el @Components metadatos proveedores formación:

 Proveedores: [MDiconregistry, http_providers], 

Ahora aprovechamos nuestra Dialogcomponente , agregando suficiente lógica para una aplicación simple de hacer. los tdodialog se llama para abrir nuestro diálogo, ya sea con la tarea para editar ( hacer ) o nulo Si estamos creando uno nuevo.

Configuramos las variables predeterminadas para una nueva tarea, o si estamos editando una tarea, en su lugar, los cambiamos en consecuencia. Luego mostramos el Dialogcomponente estableciendo el ShowDialog variable a cierto :

 Tododialog (TODO = NULL) {
    este.OkbutTontext = 'Crear tarea';
    este.fieldvalue = '';
    esto.EditingTodo = TODO;
    Si (TODO) {
      este.fieldvalue = tod.title;
      esta.OkbutTontext = 'Editar tarea';
    }
    esto.showdialog = verdadero;
  } 

los updateetodo La función se llama cuando deseamos cerrarla. Las otras funciones ( editodo De addtodo De hideseialog ) son métodos de ayuda para updateetodo .

 UpdateTodo (título) {
    if (title) {
      title = title.trim ();
      if (esto.editingtoodo) {
        esto.editodo (título);
      } demás {
        este.Addtoodo (título);
      }
    }
    esto.Hidedialog ();
  }

En Material2-do.component.html Hemos dado nuestra aplicación un Barra de herramientas MD donde hemos puesto el título, y un Icono MD llamado agregar (que se parece a un signo más) para nuestro botón de acción flotante (FAB), lo que nos permite crear una nueva tarea:

 & lt; Botón MD-FAB CLASS = "FAB-ADD" (click) = "toDodialog ()" & gt;
      & lt; MD-Icon & GT; ADD & LT; / MD-ICON & GT;
    & lt; / Button & GT; 

Usamos MD-CARD-CONTENIDO Para mantener un lista de MD y un * ngfor a iterar a través, y mostrar, nuestro lista de quehaceres matriz como MD-LIST-ATIJOS :

 & lt; MD-LIST-LETT-ARTET * NGFOR = "Deja que WADO OF TODOLISTE; DEJE INDEX = INDEXE" & GT; 

casilla de verificación MD Permite marcar los artículos en nuestra lista. Y tenemos dos md-mini-fab Botones que podemos usar para eliminar y editar nuestra tarea: MD-Iconos Delete_Forever y MODE_EDIT :

 & lt; Botón MD-MINI-FAB (click) = "Eliminar (índice)" color = "primario" & gt;
  & lt; md-icon & gt; eliminar_forever & lt; / md-icon & gt;
& lt; / Button & GT;

& lt; Botón MD-MINI-FAB (click) = "TODODIALOG (TODO)" color = "primario"
        [deshabilitado] = "TODO.COMPLETED" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / Button & GT; 

Con un pequeño CSS, estos siguen ocultos hasta que vuelva a cerrar (o haga clic). Puedes ver el código en el repositorio.

Avanzando

A medida que el material angular 2 todavía está en alfa, faltan algunas cosas, en particular, el efecto de ondulación de botón MD firma. Si bien puede haber cambios rompiendo a la API por delante, está funcionando mucho. También está a la altura de la afirmación de tener una API sencilla que no confunde a los desarrolladores, y es fácil aprovechar la creación de aplicaciones de excelentes.

Este artículo se publicó originalmente en número 284 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Suscríbete aquí .

Artículos relacionados:

• ¿Qué hay de nuevo en Angular 4?
• Cómo construir un sitio web de páginas completa en Angular
• Construir un panel de datos con angularjs