Share
Con el reciente lanzamiento oficial de Angular 2, es un buen momento para ponerse al día en algunos de los cambios más grandes.
Una cosa que ha cambiado mucho es el enrutador Angular 2, que se reemplazó por completo en el período previo al lanzamiento final. Entonces, en estos dos rápidos tutoriales en video de mi curso sobre Enrutamiento Angular 2, te mostraré cómo crear configuraciones de ruta y cómo usarlas en una aplicación. Aprenderá sobre rutas simples, redireccionamiento y rutas comodín. Luego verá cómo usar una directiva para configurar el componente de su aplicación para mostrar las rutas.
Los videos siguen las lecciones anteriores del curso, pero debería poder seguir las técnicas que usamos. Puede encontrar los archivos fuente para todo el proyecto en GitHub.
Es posible construir una aplicación completa en Angular 2 sin enrutamiento. Entonces, si podemos hacer esto, ¿por qué necesitamos enrutamiento??
La razón principal es que si no usamos el enrutamiento, nuestra aplicación dependerá únicamente de la navegación a través del control del programa. Tendremos que cambiar los componentes en función de la interacción del usuario, como cuando hacen clic en algo..
Con el enrutamiento, podremos navegar cambiando las URL. Todos los componentes se asignarán a una ruta, lo que nos permite movernos fácilmente por nuestra aplicación.
Primero, para que el enrutamiento funcione, necesitamos agregar una base href en el encabezado de nuestro archivo index.html.
Anteriormente, configuraríamos nuestras rutas dentro del componente que las alberga. En este caso, esto significaría que agregamos nuestras configuraciones de ruta a nuestro archivo app.component. Con el nuevo enrutador, se sugiere que creemos nuestra configuración de ruta en un archivo separado.
Así que vamos a crear un archivo llamado app.routes.ts en la raíz de la carpeta de la aplicación.
Lo primero que añadiremos a este archivo son las importaciones..
Primero agarra proporcionarRuter o RouterConfig desde el enrutador angular. Luego importe los componentes Acerca de, Error y Inicio desde la carpeta de páginas. Necesitamos importarlos para poder enrutar a estos componentes..
Lo siguiente que haremos es agregar nuestra configuración de ruta para mantener nuestras rutas:
rutas const: RouterConfig = [];
Aquí estamos usando una const declaración. Esta es una de las formas en que podemos declarar una variable en TypeScript, y representa un valor que no se puede cambiar. En este caso, lo estamos utilizando para mantener nuestro RouterConfig.
Ahora, lo primero que añadiremos es una redirección. En un momento, agregaremos una ruta de comodín para nuestra página de error. Esto solo hará que nuestra aplicación se inicie desde la página de error. La razón es que cuando nuestra aplicación se inicia, no tiene una ruta. Por lo tanto, necesitamos especificar un componente como la ruta predeterminada.
Podríamos agregar fácilmente el componente que queremos que inicie nuestra aplicación en la ruta vacía, pero la forma sugerida de manejar esto es con una redirección. La redirección tiene que venir primero o no funcionará correctamente. Así es como se ve:
Primero tenemos nuestro camino, que es una ruta vacía. Esta es la ruta con la que se lanzará nuestra aplicación. Luego tenemos nuestro redireccionamiento, que cambiará nuestro camino a casa cuando se encuentre con una ruta vacía. Después de eso, tenemos nuestro PathMatch. No voy a entrar en muchos detalles, excepto para decir que esto hace que la ruta vacía coincida con la redirección.
Luego tenemos nuestra ruta que apunta al Acerca deComponente. El camino está configurado para 'acerca de', que es lo que veremos en la barra de direcciones cuando navegamos a esta ruta. El componente que será navegado a es el Acerca deComponente. Después de eso, tenemos la InicioComponente. El camino es 'casa', y el componente a lanzar es el InicioComponente.
Esta es la ruta a la que navegaremos desde la redirección. Entonces la última ruta que agregaremos es una ruta comodín. Esto coincidirá con cualquier ruta que hemos definido. Esta es también la razón por la que agregamos la redirección. Si no lo hiciéramos, nuestra aplicación se iniciaría en esta ruta ya que comenzamos desde una ruta que no está definida, una ruta vacía.
Después de agregar la redirección, cualquier ruta que escribamos que no exista obtendrá nuestra página de error. Luego exportamos otra constante usando el método de enrutador proporcionado del enrutador angular. Utilizamos las rutas que configuramos con este método..
Una vez que hacemos eso, nuestras rutas están terminadas. Lo último que tenemos que hacer es agregar enrutamiento a nuestra aplicación.
Ve a la main.ts expediente. Lo primero que haremos en este archivo es importar. myRouterProviders desde la aplicación enruta el archivo que hemos creado. Entonces tenemos que agregarlo a nuestra función bootstrap. Añadirlos aquí tiene la ventaja de hacer que las rutas estén disponibles para todos los componentes en nuestra aplicación.
Una vez que hacemos eso, hemos terminado de configurar nuestras rutas. En el siguiente video, terminaremos nuestra configuración de enrutamiento y previsualizaremos la aplicación.
Hasta ahora, hemos configurado nuestras rutas y las hemos agregado a nuestra función bootstrap. Ahora, solo necesitamos configurar nuestro componente de aplicación para alojar nuestras rutas.
Así es cómo app.component.ts Debería mirar:
Primero, importamos nuestras directivas de enrutador. Hemos visto esto antes cuando un componente necesita usar el enlace del enrutador. Este componente utilizará el enlace del enrutador y otra directiva de la salida del enrutador Angular 2. Después de eso, eliminamos la plantilla y agregamos una marca de retroceso para convertirla en una cadena de plantilla. Esto nos permitirá crear una plantilla multilínea..
Primero, agregamos un div para nuestro bootstrap nav bar. Esta barra de navegación aparecerá en cada página, ya que es parte de la plantilla. Luego dentro de la barra de navegación, agregamos nuestra marca. Esto puede ser texto o una imagen, y representa la marca de su aplicación..
Luego agregamos una lista desordenada. En el interior, añadiremos nuestros enlaces para una barra de navegación. En nuestros enlaces, en lugar de una URL para navegar, tenemos routerLink. Así es como navegamos a una ruta bajo la interacción del usuario. Aquí estamos configurados para navegar a la ruta local cuando hacemos clic en este botón.
También podemos escribir el routerLink en otra forma dentro de una matriz. Normalmente lo hacemos cuando necesitamos proporcionar más información a nuestra ruta. Entonces también tenemos un routerLinkActive Directiva, que aplicará la clase de menú al enlace cuando la ruta esté activa. Estamos usando esto para mostrar una indicación visual de en qué página estamos.
Luego agregaremos otro enlace de enrutador que navega a la página Acerca de. Luego agregaremos el enrutador de salida directiva. Es por esto que los componentes no necesitan un selector. Cuando se cargan al enrutamiento, esta directiva alojará los componentes. Mientras que el resto de esta plantilla aparecerá estática en cada página, el enrutador de salida cambiará según la ruta a la que se navegue. Finalmente para este archivo, agregamos las directivas del router..
Después de eso, lo último que debemos hacer es agregar una regla CSS a la style.css expediente:
.menú fondo-color: blanco;
Esta regla es para la clase que se aplicará cuando la ruta adjunta al enlace del enrutador esté activa. El fondo del enlace será el color blanco. Y ahora, el enrutamiento está configurado para nuestra aplicación..
Adelante, guarda el proyecto y corre. npm start en la carpeta del proyecto.
Si todo se hizo correctamente, la aplicación debería compilarse y luego iniciarse desde un navegador web..
Si nota, el fondo del enlace de inicio está sombreado en blanco. Esto se debe a que esta es la ruta activa. Entonces si hacemos clic en el Acerca de Botón, deberíamos ir a la página Acerca de..
Después de eso, vamos a escribir una ruta inexistente en la barra de direcciones. Cuando hacemos eso, deberíamos obtener una página de error..
Ahora tenemos enrutamiento funcionando en nuestra aplicación, pero hay mucho más que podemos hacer con ella. En el resto del curso, te sumergirás en el enrutamiento con mucha más profundidad..
En el curso completo, Enrutamiento Angular 2, le enseñaré cómo usar el nuevo enrutador Angular 2 en sus aplicaciones. Verá cómo configurar el enrutamiento básico a páginas estáticas, cómo extraer parámetros de la ruta de la ruta y cómo hacer que su enrutamiento sea modular. También verá cómo se puede implementar el control de acceso del usuario con el enrutador Angular 2.
Accentsconagua