Cómo construir una interfaz de usuario de inicio de sesión con diseño angular y material

Este tutorial le mostrará cómo crear una hermosa interfaz de usuario de inicio de sesión y registro con material angular. Examinaremos los diversos componentes de diseño de materiales y cómo se pueden utilizar para lograr aplicaciones de aspecto profesional. El código completo para este tutorial se puede encontrar en nuestro repositorio de GitHub..

Empezando

Comenzaremos creando una aplicación Angular. Con suerte, ya tiene Node.js y Angular CLI instalados en su entorno de trabajo.

Usa el siguiente comando para crear una nueva aplicación Angular.

# cree un nuevo proyecto Angular con el nombre responsive-angular-material ng new registration-login-angular-material

Este comando crea todos los archivos necesarios para arrancar una aplicación Angular. El siguiente paso será agregar material angular en su aplicación.. 

cd responsive-angular-material / #instalar material angular ng add @ angular / material

Creación de componentes utilizando CLI angular

Componentes en Angular son los bloques de construcción de la aplicación. Aunque puede crear componentes manualmente, Angular CLI facilita la generación automática de componentes que contienen todo el código de inicio necesario. Para generar un componente en CLI angular, simplemente ejecute el siguiente comando:

# MyComponent es el nombre de su componente ng g componente MyComponent

Nuestra aplicación tendrá los siguientes componentes:

• la Registro componente
• la Iniciar sesión Componente

Generemos esos componentes ahora.

#registración componente ng g componente RegistrationComponent #login componente ng g componente LoginComponent

Añadiendo un tema

La belleza de Angular Material es que viene con temas predefinidos, por lo que puede arrancar fácilmente la apariencia de su aplicación simplemente insertando algunos fragmentos simples de código en su aplicación. Para agregar un tema, simplemente importarlo a style.css.

/*style.css*/ @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Construyendo la interfaz de usuario

Queremos que nuestra interfaz de usuario incluya una barra de navegación con enlaces para el registro y el inicio de sesión. Así que crearemos una barra de navegación con dos botones que enlazan con los componentes de la aplicación..

Para crear una barra de herramientas y botones, use la  y  componentes respectivamente.

Continúe y agregue el código HTML para la interfaz de usuario en src / app / app.component.html. Tenga en cuenta que también hemos añadido enlaces a las rutas..

    CASA  Registro de inicio de sesión  

A continuación, agregaremos un poco de estilo a nuestra interfaz de usuario. Abierto app.component.css y agrega los siguientes estilos CSS.

.espaciador flex: 1 1 auto; 

Importar componentes de material angular

También es necesario importar los módulos desde @ angular / material. Puede elegir importarlos desde el módulo principal o crear un módulo separado que contendrá todos los módulos de diseño de materiales. Dado que trabajaremos con muchos de estos módulos al crear el resto de la interfaz de usuario, crearemos un módulo separado para todos los componentes. Sigue adelante y crea un nuevo archivo. src / app / material.module.ts.

Agrega los módulos para el  , , y  componentes en el archivo como se muestra a continuación.

importe NgModule desde '@ angular / core'; importar MatButtonModule, MatToolbarModule desde '@ angular / material'; @NgModule (imports: [MatButtonModule, MatToolbarModule], exporta: [MatButtonModule, MatToolbarModule],) clase de exportación MyMaterialModule 

Luego, de otros componentes en nuestro código, solo necesitamos incluir el módulo que acabamos de crear.-app / app.module.ts-Como se muestra abajo.

// app / app.module.ts importa MyMaterialModule desde './material.module'; @NgModule (imports: [BrowserModule, BrowserAnimationsModule, MyMaterialModule,],)

Emitir el ng servir comando para probar su aplicación, y debería ver un área de navegación atractiva con Registro y Iniciar sesión campo de golf.

Habilitar enrutamiento

El enrutamiento permite a los usuarios navegar entre diferentes páginas. Para habilitar el enrutamiento en nuestra aplicación, primero definiremos la configuración de enrutamiento. Para hacer eso, agrega el siguiente código a app.module.ts.

importe RouterModule, Routes desde '@ angular / router'; importaciones: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'full', path: 'register', componente: RegistrationComponentComponent, path: 'login' , componente: LoginComponentComponent,]),],

El siguiente paso será agregar un  Elemento que permite al enrutador angular saber dónde colocar los componentes enrutados. los app.component.html El archivo ahora debería verse así:

    CASA  Registro de inicio de sesión   

Hemos colocado la salida del enrutador para que los componentes se representen debajo de la barra de navegación..

Registro UI

En esta sección, utilizaremos principalmente los componentes de diseño y control de formulario. Esta interfaz de usuario mostrará estos componentes de diseño de materiales:

• componente de la tarjeta () -un contenedor de contenido para texto, fotos y acciones en el contexto de un solo tema
• componente de etiqueta () - usado para especificar una etiqueta para el campo de formulario
• componente de entrada () -especifica un campo de entrada
• componente de campo de formulario () -envuelve varios componentes angulares para hacer un campo de formulario
• componente casilla de verificación () -una casilla de verificación nativa con un estilo mejorado de diseño de materiales
• componente selector de fecha () -un selector de fecha mejorado

Pero primero, importémoslos en src / app / material.ts.

importe NgModule desde '@ angular / core'; import MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, / importe MatDatepickerModule desde '@ angular / material / datepicker'; importar FormsModule, ReactiveFormsModule desde '@ angular / forms'; @NgModule (importaciones: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], las exportaciones: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) clase de exportación MyMaterialModule 

Comenzaremos con el , que contendrá todo el contenido en la IU de registro. Abierto registration-component.component.html y agrega el siguiente código.

 Registro         

A continuación, agregaremos un formulario HTML dentro de la sección de contenido que contendrá todos nuestros campos de formulario.

  Registro    
  
     

A continuación, agregaremos campos de formulario para el nombre, apellido, dirección, correo electrónico y contraseña. Estaremos usando  para crear etiquetas y  para crear los campos de entrada.

 
  Nombre de pila    Apellido    Dirección    Email    Contraseña   
 

A continuación, agregaremos una casilla de verificación para el género y un selector de fecha para la fecha de nacimiento. Usaremos  y  que han mejorado el estilo de diseño de materiales y animaciones.

 
 Género:  Masculino Hembra Otro  
  Fecha de nacimiento    

El último bit será un botón después de la  para enviar la información del usuario.

 
  
   REGISTRO  

Forma de estilo

Pongamos un poco de estilo en nuestros formularios para hacerlos más presentables. Abierto create-account.component.css y agrega los siguientes estilos CSS.

.my-form min-width: 150px; ancho máximo: 500px; ancho: 100%;  .full-width ancho: 100%; 

La UI de registro se verá así:

Creación de la interfaz de usuario para el componente de inicio de sesión

La IU de inicio de sesión tendrá los siguientes componentes:

• componente de la tarjeta () -un contenedor de contenido para texto, fotos y acciones en el contexto de un solo tema
• componente de entrada () -especifica un campo de entrada

Al igual que hicimos para la IU de registro, tendremos un componente de tarjeta de material para alojar el formulario de inicio de sesión.

El código HTML para el Iniciar sesión Se muestra la página, que contiene dos entradas para las credenciales de correo electrónico y contraseña.

 INICIAR SESIÓN    
  Email    Contraseña   
   INICIAR SESIÓN  

La interfaz de usuario terminada se verá así:

Conclusión

Este tutorial ha cubierto la mayoría de los componentes de material angular necesarios para crear una interfaz de usuario que funcione completamente. Como ha visto, el material angular es muy fácil de usar, ya que todos los componentes tienen estilos predefinidos. Esto significa que puedes crear rápidamente interfaces de usuario hermosas. Además, la documentación de Material angular proporciona muchos ejemplos y es fácil de seguir..