Cree una aplicación de Material Design con Angular 2

Pantallas de portátiles y teléfonos con logotipo angular

Angular Material es un marco de componentes de interfaz de usuario que implementa la especificación Material Design de Google para Angular 2, la nueva implementación más rápida de Angular, escrita en TypeScript. Aunque todavía está en alfa, Angular Material ya proporciona un conjunto de componentes de interfaz de usuario reutilizables y accesibles basados ​​en Material Design.

Angular 2 en sí está diseñado para su uso en todas las plataformas (web, móvil y de escritorio) y tiene muchas tecnologías nuevas asociadas. En el nivel de JavaScript, tenemos la sintaxis adicional de ECMAScript 2015 (ES6), la mecanografía y el soporte de interfaz de TypeScript, junto con los decoradores de la API de reflexión de metadatos. Utiliza observables de la biblioteca Reactive Extensions para administrar secuencias de eventos en una forma de programación funcional. Utiliza zonas para encapsular e interceptar la actividad asincrónica para proporcionar una forma de almacenamiento local de subprocesos, lo que permite que Angular responda automáticamente a los cambios de datos en eventos asincrónicos para mantener los enlaces de datos. Finalmente, SystemJS maneja la carga del módulo.

En este tutorial usaremos Angular 2 para crear una aplicación simple de tareas pendientes con algunos elementos de diseño de materiales característicos. Obtenga los archivos fuente aquí .



Configurar

Configurar el entorno inicial puede resultar complicado. Hay un angular2-semilla disponible, así como un angular2-starter . Sin embargo, hay algo aún mejor: con angular-cli 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 de Node y npm), sino que también agregará andamios para las pruebas unitarias de Jasmine, pruebas de extremo a extremo de transportador, más pruebas de TSLint y Codelyzer análisis de código estático de Angular 2 TypeScript. Aunque no tiene que usar todos estos, definitivamente debería hacerlo. Es tan fácil de usar que te preguntarás cómo te las arreglaste sin él.

Angular CLI está disponible como un paquete npm, por lo que deberá instalar Node y npm globalmente en su máquina usando npm install -g angular-cli . Ahora crea una nueva aplicación Angular 2 con de nuevo material2-hacer . Vas a tener que esperar un poco, porque después de generar los archivos necesarios, inicializa un repositorio Git y hace un npm install para descargar todos los módulos necesarios en módulos_nodo / . Eche un vistazo a package.json y familiarícese con los módulos y los scripts allí.

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

Agregar diseño de material

La aplicación predeterminada no sabe nada sobre Material Design (un descuido, estoy seguro), así que tenemos que agregarlo nosotros mismos.

Hay una lista de paquetes publicados de Angular 2 Material Design en el @angular2-material Biblioteca. En este ejemplo usaremos centro (requerido para todas las aplicaciones de Angular Material 2), así como botón , tarjeta , caja , icono , aporte , lista y barra de herramientas :

|_+_|

Para que el paquete de proveedores funcione, debemos agregar @angular2-material/**/* a la matriz de vendorNpmFiles en angular-cli-build.js . También necesitamos agregar la ruta a @angular2-material hacia mapas objeto:

|_+_|

Deje que SystemJS sepa cómo procesar nuevos módulos apuntando a los archivos principales de cada uno de los paquetes:

|_+_|

Ahora es el momento de cargar la fuente del icono de Material Design en la de src / index.html . Cualquier fuente funcionará, pero estamos usando los íconos estándar de Material Design:

tableta para tomar notas para estudiante universitario
|_+_|

Crear un cuadro de diálogo MD

Ahora podemos trabajar con Material Design en nuestra aplicación de tareas pendientes. Uno de los componentes que faltan actualmente en Angular 2 Material Design es un mensaje o diálogo, ¡así que para nuestra primera tarea haremos uno!

Creemos un nuevo componente usando una tarjeta de Material Design, una barra de herramientas, una entrada y un par de botones. En el src / aplicación carpeta de su repositorio, escriba ng generar diálogo de componente . Esto genera una nueva DialogComponent en src / app / dialog , y agrega un barril a system-config.ts para que SystemJS sepa cómo cargarlo.

Si miras el generado dialog.component.ts archivo, verá que la primera línea es: importar {Componente, OnInit} desde '@ angular / núcleo'; . Componente es uno de los principales componentes básicos de Angular, y OnInit es una de las interfaces que implementa. Sin embargo, para tener acceso a la comunicación entre los componentes anidados, así como los componentes de Material Design mencionados anteriormente, necesitamos importar Input, Producción y EventEmitter desde @ angular / núcleo; y MdCard , MdInput , MdToolbar y MdButton de sus módulos correspondientes en el @angular2- material Biblioteca.

Para renderizar estos componentes de Material, necesitamos inyectar las directivas DialogComponent requiere. Agregaremos las siguientes directivas al @Componentes metadatos:

|_+_|

Luego declaramos una serie de @Aporte variables ( okText , cancelText y así sucesivamente) que nos permiten definir el contenido del diálogo. También necesitamos agregar uno @Producción emisor que nos permite disparar una función con un valor en el componente padre cuando se cierra el diálogo.

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

|_+_|

Además de utilizar el @Aporte variables dentro de nuestro DialogComponent dentro de dialog.component.html plantilla, la entrada md nos permite aceptar la entrada del usuario:

|_+_|

los botones-md permitir que el usuario haga clic en 'Aceptar', 'Cancelar' o lo que sea que decida etiquetar estos botones:

|_+_|

Observe la tecla Arriba controladores de eventos, que se encargan de todo cuando se presiona la tecla Intro o Escape. Estos manipuladores son idénticos a los hacer clic controladores de eventos para cancelText y okText . Escape hace lo mismo que cancelar (emitValue (nulo)) , y presionar Enter 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 la salida emitida.

Podemos ver ejemplos de varios componentes de Material Design: tarjeta md , botón md , etcétera. También necesitamos agregar algo de CSS en dialog.component.css para lograr el diseño que deseamos, puede ver el código completo en el repositorio de GitHub adjunto.

Ahora agreguemos esto DialogComponent a material2-do.component.html para ver cómo se ve:

|_+_|

Observe que tenemos cadenas literales para todos los @Entradas . Estos requieren que usemos comillas simples y dobles, de lo contrario Angular interpretaría el contenido 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 habrían tenido como valor predeterminado cadenas vacías si se hubieran omitido.

Modifiquemos Material2DoComponent . Necesitamos importar DialogComponent y declararlo como una directiva, de lo contrario Material2DoComponent no podrá renderizarlo. También agregaremos la función de registro:

|_+_|

Echemos un vistazo a nuestra obra. Puede servir la aplicación (el puerto predeterminado es 4200) ejecutando npm run-script start , que a su vez corre del servidor . Si abre la consola, puede ver lo que está registrado: el contenido de la entrada se emite cuando hace clic en 'Sí', y nulo se emite al hacer clic en 'No'.

Ahora estamos listos para usar este nuevo DialogComponent para crear nuestra aplicación de tareas pendientes.

Crea la aplicación principal

Vamos a utilizar los siguientes componentes MD para la aplicación principal: barra de herramientas , lista , elemento de lista , caja , botón , icono , icono-registro , y su dependiente, HTTP_PROVIDER , de la biblioteca HTTP angular. Por lo tanto, estos deben agregarse a la sección de importación de Material2DoComponent .

Una vez más, para poder renderizar estos componentes, necesitamos incluirlos en el @Componentes metadatos directivas matriz junto con DialogComponent , que acabamos de agregar:

|_+_|

Para acceder a la MdIconRegistry , necesitamos inyectarlo, junto con HTTP_PROVIDERS , mediante el @Componentes metadatos proveedores formación:

|_+_|

Ahora aprovechamos nuestro DialogComponent , agregando suficiente lógica para una aplicación simple de tareas pendientes. los todoDialog se llama para abrir nuestro diálogo, ya sea con la tarea de editar ( todo ) o nulo si estamos creando uno nuevo.

Configuramos las variables predeterminadas para una nueva tarea o, si estamos editando una tarea, las cambiamos en consecuencia. Luego mostramos el DialogComponent configurando el showDialog variable a cierto :

|_+_|

los updateTodo se llama a la función cuando deseamos cerrarla. Las otras funciones ( editTodo , addTodo , hideDialog ) son métodos de ayuda para updateTodo .

|_+_|

En material2-do.component.html le hemos dado a nuestra aplicación un barra de herramientas md donde hemos puesto el título, y un icono-md llamado agregar (que parece un signo más) para nuestro botón de acción flotante (FAB), que nos permite crear una nueva tarea:

|_+_|

Usamos contenido de la tarjeta md sostener un lista-md y un * ngFor para iterar y mostrar nuestra lista de quehaceres matriz como elementos de lista-md :

|_+_|

casilla de verificación md nos permite marcar los elementos de nuestra lista. Y tenemos dos md-mini-fab botones que podemos usar para borrar y editar nuestra tarea: md-icons delete_forever y mode_edit :

|_+_|

Con un poco de CSS, estos permanecen ocultos hasta que se desplaza (o hace clic). Puedes ver el código en el repositorio.

Avanzando

Como Angular Material 2 todavía está en alfa, faltan algunas cosas, en particular, el efecto dominó del botón MD característico. Si bien puede haber cambios importantes en la API en el futuro, está funcionando en gran medida. 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 de aprovechar para la creación de aplicaciones de gran apariencia.

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

Artículos relacionados: