¿Cómo se puede construir un sistema de navegación con AngularJS para una aplicación web?

Hola,

Casi ninguno de los materiales de capacitación y ayuda disponibles en AngularJs explica esta parte claramente … ¿Cómo ayuda AngularJs a manejar eso?

Ok, Angular dejó de incluir el módulo ‘ng-route’ en su núcleo. Debe inyectarlo explícitamente, si lo necesita. Esto se debe a que los desarrolladores comenzaron a crear navegaciones complejas y estructuras de plantillas anidadas profundamente y ahora continuaron para encontrar / crear soluciones propias basadas en ‘ng-route’ para resolver esos problemas. El Angular UI Router [angular-ui / ui-router] vino a rescatarlo con soluciones exhaustivas para este problema en particular. Entonces, la razón por la que encuentra información limitada sobre este tema en la guía oficial de Angular es porque solo proporciona funciones / soluciones limitadas.
Entonces, la siguiente pregunta es ¿podemos hacer cosas complejas con ‘ng-route’?
Creo que es como preguntar si podemos hacer la manipulación DOM con JavaScript simple. La respuesta es obvia, sí. Pero vale la pena, es algo que varía según los proyectos y las personas.

Más específicamente, ¿cómo funciona el manejo de páginas con diferentes diseños? por ejemplo, las páginas de configuración o perfil pueden no tener la misma plantilla que las páginas principales de la aplicación. En otras palabras, no veo que todas las vistas encajen como “parciales”.

De acuerdo, no todas las páginas se ajustarán al diseño. La solución inmediata será tener todas las páginas como parciales y un diseño en blanco. Eso funciona pero el código huele e idealmente querrías hacer otra cosa. Puede usar ‘ng-if’ o ‘ng-show’ para controlar lo que desea mostrar en función de los parámetros de ruta. Puede usar ‘ng-include’ o crear directivas para manipular datos y DOM, nuevamente basado en parámetros de ruta. Todas las soluciones están sujetas a la naturaleza del problema que está tratando de resolver.
Por lo tanto, básicamente se reduce a esto, establecer las variables necesarias para definir el estado de la aplicación y en función del contenido de visualización del estado. Este es en realidad el resumen del enrutador de IU angular. No quiero parecer que estoy vendiendo UI Router, pero vale la pena verificarlo para comprender las plantillas anidadas y las construcciones de enrutamiento complejas y también cómo resolverlas.
También puede consultar AngularJS: anidamiento complejo de parciales y plantillas en SO para obtener más detalles técnicos.

¡Espero que ayude!

Como Shoaib ha declarado en su respuesta, Angular ya no viene incluido con ngRoute, por lo que debe inyectarse. Estoy construyendo un proyecto relativamente complejo en Angular en este momento, así que si bien comencé con ngRoute, rápidamente cambié a usar ui-router (que es realmente genial).

Con ui-router, la navegación se maneja principalmente con ‘estados’ en lugar de rutas URL, por lo que puede redirigir a los usuarios con un código que se parece un poco a esto:

$scope.go('app.welcome')

Cuesta un poco acostumbrarse, pero es realmente poderoso. La app. el prefijo es para herencia: puede colocar en cascada propiedades a través de estados. Digamos que tiene un área de usuario privada, puede colocar en cascada una propiedad que requiere un inicio de sesión, y todas las rutas después de ese prefijo requerirán un inicio de sesión.

También puede conectar en cascada plantillas y parciales. Entonces en nuestra app. declaramos que tenemos un encabezado y pie de página parcial, y un contenido central parcial. Los estados posteriores simplemente reemplazan el contenido. La sintaxis es un poco funky pero es súper poderosa.

Todo esto es completamente transparente para el usuario, por supuesto, al igual que cualquier otro sitio web. Es solo un marco bastante agradable para construir.

Aquí hay material de lectura para comenzar:

Documentos: comience aquí con los documentos oficiales, están bastante bien escritos
Enrutamiento AngularJS con UI-Router
3 consejos simples para usar UI-Router
UI-Router: ¿Por qué muchos desarrolladores no usan el enrutador incorporado de AngularJS? – Funny Ant
Autenticación simplificada en aplicaciones AngularJS de página única

Y si está interesado, nuestro frontend está codificado casi completamente en Angular con ui-router para estados / enrutamiento: timelock – La programación es simple