Share
Angular es un marco integral para crear aplicaciones móviles y web que utilizan el mismo código reutilizable. Con Angular, puede dividir toda la aplicación en componentes reutilizables, lo que facilita el mantenimiento y la reutilización del código..
En esta serie de tutoriales, aprenderá cómo comenzar a crear una aplicación web utilizando Angular con MongoDB como back-end. Estarás usando Node.js para ejecutar el servidor.
A lo largo de este tutorial, construirás una aplicación de blogging con Angular, Node.js y MongoDB..
En este tutorial, verá cómo comenzar con la configuración de la aplicación y la creación de Iniciar sesión componente.
Empecemos instalando el CLI angular.
npm install -g @ angular / cli
Una vez que haya instalado la CLI angular, cree una carpeta de proyecto llamada AngularBlogApp.
mkdir AngularBlogApp cd AngularBlogApp
Desde la carpeta del proyecto, cree una nueva aplicación Angular usando el siguiente comando:
nuevo cliente
Una vez que tengas la cliente aplicación creada, navegue a la carpeta del proyecto e instale las dependencias necesarias usando Node Package Manager (npm).
cd client npm install
Inicie el servidor cliente usando npm.
npm start
Debe tener la aplicación ejecutándose en http: // localhost: 4200 /.
Tu aplicación web Angular tendrá un componente raíz. Crea una carpeta llamada raíz dentro de src / app carpeta. Crear un archivo llamado root.component.html y añada el siguiente código HTML:
Componente raíz
Añadir un archivo llamado root.ponent.ts y añada el siguiente código:
importar Componente desde '@ angular / core'; @Component (selector: 'app-root', templateUrl: './root.component.html') exportar clase RootComponent
Quitar los archivos app.component.html, app.component.ts, app.component.scss, y app.component.spec.ts. Tendrás solo un archivo llamado app.module.ts dentro de src / app carpeta.
Importar el RootComponent dentro de app.module.ts expediente.
importe RootComponent desde './root/root.component';
Incluir la RootComponent en el ngmódulos y arrancarlo.
@NgModule (declaraciones: [RootComponent], importaciones: [BrowserModule, FormsModule], proveedores: [], bootstrap: [RootComponent])
Guarde los cambios y reinicie el servidor. Tendras el RootComponent se muestra cuando se carga la aplicación.
Estarás usando Angular Enrutador Para enrutar en nuestra aplicación de blogs. Por lo tanto, importe las dependencias relacionadas con el enrutamiento en un nuevo archivo llamado app.routing.ts dentro de src / app carpeta.
importe RouterModule, Routes desde '@ angular / router'; importe ModuleWithProviders desde '@ angular / core / src / metadata / ng_module';
Defina la ruta de la ruta junto con los componentes como se muestra:
export const AppRoutes: Routes = [path: ", component: LoginComponent];
Exportar las rutas para crear un módulo con todos los proveedores de rutas..
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Aquí es cómo el app.routing.ts aspecto del archivo:
importe RouterModule, Routes desde '@ angular / router'; importe ModuleWithProviders desde '@ angular / core / src / metadata / ng_module'; importe LoginComponent desde './login/login.component'; export const AppRoutes: Routes = [path: ", componente: LoginComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Como se ve en el código anterior, aún no ha creado el LoginComponent. Se ha añadido para mayor claridad..
Importar el ENRUTAMIENTO clase en el app.module.ts expediente.
importar ROUTING desde './app.routing';
Incluirlo en el NgModule importaciones.
importaciones: [BrowserModule, ROUTING, FormsModule]
Lugar RouterOutlet en el root.component.html página. Esto donde el componente de la ruta se renderiza..
Crea una carpeta llamada iniciar sesión dentro de src / app carpeta. Dentro de iniciar sesión carpeta, crea un archivo llamado login.component.ts y añada el siguiente código:
importar Componente desde '@ angular / core'; @Component (selector: 'app-login', templateUrl: './login.component.html') clase de exportación LoginComponent constructor ()
Crear un archivo llamado login.component.html y añada el siguiente código:
Componente de inicio de sesión
Guarde los cambios anteriores y reinicie el servidor. Según las rutas definidas cuando la aplicación carga el LoginComponent se mostrará.
Ya sentaste las bases para el LoginComponent Al configurar la aplicación. Vamos a crear la vista para el LoginComponent utilizando Oreja.
Descargar e incluir el estilo CSS bootstrap en el bienes carpeta e incluir la referencia en el src / index.html página.
Coloque una envoltura alrededor de la raíz de la aplicación en el index.html página.
Agregue el siguiente HTML a la login.component.html página.
Crear un archivo llamado login.component.css dentro de iniciar sesión carpeta y añadir el siguiente estilo CSS.
.sign-signin max-width: 330px; relleno: 15px; margen: 0 auto; .form-signin .form-signin-head, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: 400; .form-signin .form-control posición: relativo; tamaño de caja: caja de borde; altura: auto; relleno: 10px; tamaño de fuente: 16px; .form-signin .form-control: focus z-index: 2; entrada .form-signin [type = "email"] margin-bottom: -1px; borde inferior-derecho-radio: 0; borde inferior-izquierdo-radio: 0; entrada .form-signin [type = "password"] margin-bottom: 10px; borde superior-izquierdo-radio: 0; borde superior-derecho-radio: 0;
Modificar el @Componente decorador para incluir el estilo CSS.
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'])
Guarde los cambios anteriores e intente cargar la aplicación. Tendras el LoginComponent se muestra con la vista de inicio de sesión.
LoginComponent Tendrá que interactuar con la base de datos para ver si el usuario que ha iniciado sesión es válido o no. Por lo que tendrá que hacer llamadas a la API. Mantendrás la parte de interacción de la base de datos en un archivo separado llamado login.service.ts.
Crear un archivo llamado login.service.ts y añada el siguiente código:
importar Inyectable desde '@ angular / core'; importe HttpClient desde '@ angular / common / http'; @Injectable () exportar clase LoginService constructor (http privado: HttpClient) validateLogin ()
Importar el LoginServicio en el LoginComponent y agregarlo como proveedor en el decorador de componentes..
importe LoginService desde './login.service';
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], proveedores: [LoginService])
Agrega un método llamado validateLogin en el login.service.ts Archivo que hará la llamada a la API. Aquí está cómo se ve:
Accentsconagua
validateLogin (usuario: usuario) return this.http.post ('/ api / user / login', nombre de usuario: nombre de usuario.usuario, contraseña: contraseña de usuario)Como se ve en el código anterior, devuelve un observable que se suscribirá en el login.component.ts expediente. Aquí es cómo el login.service.ts aspecto del archivo:
importar Inyectable desde '@ angular / core'; importe HttpClient desde '@ angular / common / http'; importar User desde '... /models/user.model'; @Injectable () exportar clase LoginService constructor (http privado: HttpClient) validateLogin (usuario: usuario) return this.http.post ('/ api / user / login', username: user.username, password: user .contraseña ) Añade el ngModel Directiva a los elementos de entrada en login.component.html.
Añadir un evento de clic al botón de inicio de sesión.
Así es como se modifica. login.component.html miradas
Definir e inicializar la variable de usuario en el login.component.ts expediente.
usuario público: Usuario; constructor (private loginService: LoginService) this.user = new User ();
los Usuario modelo ha sido definido en el src / app / models carpeta. Aquí está cómo se ve:
exportar clase User constructor () this.username = "; this.password ="; nombre de usuario público; contraseña pública;
Definir un método llamado validateLogin El cual será llamado al hacer clic en el botón. Aquí es cómo se ve el método:
validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result);, error => console.log ('error is', error);); else alert ('ingresar nombre de usuario y contraseña'); Cuando tanto el nombre de usuario como la contraseña han sido ingresados, validateLogin método se suscribe a la LoginServicio Método para validar el inicio de sesión del usuario..
Aquí es cómo el login.component.ts aspecto del archivo:
importar Componente desde '@ angular / core'; importe LoginService desde './login.service'; importar User desde '... /models/user.model'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], proveedores: [LoginService]) clase de exportación LoginComponent public usuario: Usuario; constructor (private loginService: LoginService) this.user = new User (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result); , error => console.log ('error is', error);); else alert ('ingresar nombre de usuario y contraseña'); En esta parte de la serie de tutoriales de la aplicación de blogs Angular, vio cómo comenzar a crear una aplicación web utilizando Angular. Usted creó la estructura básica de la aplicación Angular y creó la LoginComponent lo que permitirá al usuario validar el nombre de usuario y la contraseña.
En la siguiente parte de la serie de tutoriales, escribirá la API REST para la validación de inicio de sesión del usuario y creará el componente de inicio.
El código fuente de este tutorial está disponible en GitHub.
Háganos saber sus pensamientos y sugerencias en los comentarios a continuación.
