Excelente clase, me ayudo bastante para mi proyecto de la Universidad!!!
Manejo de rutas
Qué aprenderás sobre Angular Router y programación modular
Creando rutas
Creando el Home
Página de categorías
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
Módulos
LazyLoading y CodeSplitting
Programación Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de módulos
Precarga de módulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Creando en Website Module
14/25Recursos
Un Website típico suele tener una página “home”, una página de “nosotros”, una página de “términos y condiciones”, entre otras páginas triviales.
Reto para crear tu propio website con Angular
El reto para ti es crear tu propio website con Angular y modularizar la aplicación.
Recuerda, para que la aplicación esté correctamente modularizada, debes importar las rutas a tus módulos de forma asíncrona de la siguiente manera.
// app-routing.module.ts
const routes: Routes = [
{
path: '',
loadChildren: () => import('./modules/website/website.module').then(m => m.WebsiteModule)
},
{
path: 'cms',
loadChildren: () => import('./modules/cms/cms.module').then(m => m.CmsModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Crea una regla en tus rutas por cada módulo para que el código Javascript se cargue dinámicamente cuando el usuario lo solicita.
Contribución creada por: Kevin Fiorentino.
Aportes 9
Preguntas 6
Ordenar por:
Lectura complementaria para la clase y entender a profundidad de que va esto de la modularizacion: https://medium.com/@yonem9/angular-qué-son-los-módulos-y-cómo-se-refactoriza-una-aplicación-9457550e8e9
Si usais VSC como editor de código hay una funcionalidad [ctrl] + H, o desde el menú edit/reemplazar, que te permite reemplazar código, te sale una pequeña ventanita con dos imputs, arriba colocas esto: ./website/ y en el input de abajo esto ./ y luego le das al botón de reemplazar todos y listo. No tienes que andar sustituyendo línea por línea, aquí son 11 líneas que tal si fueran 800
this class was crazy!!!
Aqui en comando
$ ng g m website --routing
La implementación de Lazyload realmente cambia significativamente el rendimiento, y esta es la mejor forma de implementarlo que he visto
Hubiera sido mejor que se hiciera desde un principio, es molesto estar refactorizando todo.
Nota de esta clase Los modulos externos como Swiper son necesarios habilitarlos dentro de los modulos que creados en Angular (ng g m), no es igual a los modoulos nativos como Forms o CDK que al importarlos en el padre se habilitan para todos los modulos que tengamos.
Esto fue necesario hacerlo por la refactorización que hace el profe pero seguramente en proyectos grande nos toparemos con el mismo error al refactorizar
Lo que más me molesta de este curso es que en vez de dar una vista general a lo que vamos a llegar (solo en ese momento explicar el resto), cuando uno cree que puede encontrar algo que le sirve, dos clases después, se desarma todo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?