Agregando navegación con Page.js

Clase 15 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Uno de los elementos por lo que se distingue un single page application es la navegación. Muy similar a las rutas de express, page.js nos ayuda a crear esta funcionalidad desde el lado del cliente.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram11.rar?raw=true

Juan David E.R.

student•

También pueden hacer esto.


app.get(['/','/signup', '/signin'], (req, res) => {

  res.render('index')

})

si le pasan un arreglo, que indiquen las tres rutas, logran que funcione igual, esto mas que todo para no repetir la misma instrucción. espero les sirva. :)

Ema -

student•

Tremendo! gracias!!

Jose Luis Campos Bautista

student•

Gracias por el aporte.

Nestor Beltran

student•

nada que ver con la clase pero en el minuto 13:43 se escucha un grito muy macabro jajaja xD

Ramon Molina

student•

pense que fui el unico que escucho jaja

Evert Escalante

student•

una vez escuche Gol de Colombia y luego pedian calma

Erick Neftalí Sarmiento Cortes

student•

Cuando refresco la pantalla se me desaparece el footer, me podrían ayudar?

Evert Escalante

student•

Credito para @Vktor

Ten cuidado con las tabs en el index.pug, es probable que tu footer esté dentro de main-container … el footer debe estar a la misma “altura”, osea a la par del main-container, no dentro

martin Berkhoff J.

student•

Eh realizado cada uno de los pasos pero al momento de mostrar el localhost:3000 o localhost:3000/singup no me muestra el contenido agregado por el innerHTML, no entra a lo creado por el page('/' function) ..... qué podría ser ???

martin Berkhoff J.

student•

martin Berkhoff J.

student•

Genero en la carpeta public tanto la hoja de estilos como el app.js. Tengo problemas con el PAGE pero no sé que podría ser

Cristian Andres Arrieta

student•

Muy bueno voy a mi paso y e ha entendido todo

Paco

student•

Esto es como hacer router con angular 1.x, no?

Sacha Lifszyc

teacher•

page.js es una libreria que se encarga de las rutas en el frontend de tu aplicación

Podria compararse con el router de Angular o el de React también. Cumplen la misma función.

David Zonana

student•

Las rutas las definimos en backend o en frontend? De lo que he visto en frameworks backend las ponemos ahi, como en django son las URLs. ¿O son diferentes? Me suena algo complicado, ¿Le estamos quitando tareas al backend?

Giancarlo Vera Burgos

student•

Las rutas las estamos definiendo en el backend (server.js) donde declaramos:

app.get('/', function(req, res){res.render('index');});

En el frontend (index.js) estamos agregando la navegación con page.js:

page('/', function(ctx, next){main.innerHTML = 'Home <a href="/signup">Signup</a>';})

Sergio Daniel Xalambrí

student•

Las rutas se deben definir en backend. Definirlas en frontend es solo si vas a crear una SPA (Single-page Application) y te sirve en ese caso ya que estas no recargan las página el cambiar de ruta, en vez de eso cambian la url, se traen datos y cambian la UI.

Julian

student•

hola buenas noches, apenas termine los primeros 5 minutos del vídeo, y cuando fui a correr el comandoo gulp, me sale lo siguiente, pueden ayudarme por favor:

C:\Users\Julian_Toro\Desktop\Platzigram>gulp
C:\Users\Julian_Toro\Desktop\Platzigram\node_modules\node-sass\lib\index.js:14

throw new Error(errors.missingBinary());

^

Error:
Missing binding C:\Users\Julian_Toro\Desktop\Platzigram\node_modules\nod
e-sass\vendor\win32-x64-46\binding.node
Node Sass
could not find a binding for your current environment: Windows 64-bit
with
Node.js 4.x

Found
bindings for the following environments:
-
OS X 64-bit with Node.js 5.x

This
usually happens because your environment has changed since running npm ins tall.
Run npm rebuild node-sass to build the binding for your current environment.

at Object.<anonymous> (C:\Users\Julian_Toro\Desktop\Platzigram\node_modules
\node-sass\lib\index.js:14:11)

at Module._compile (module.js:409:26)

at Object.Module._extensions..js (module.js:416:10)

at Module.load (module.js:343:32)

at Function.Module._load (module.js:300:12)

at Module.require (module.js:353:17)

at require (internal/module.js:12:17)

at Object.<anonymous> (C:\Users\Julian_Toro\Desktop\Platzigram\node_modules
\gulp-sass\index.js:187:21)

at Module._compile (module.js:409:26)

at Object.Module._extensions..js (module.js:416:10)

C:\Users\Julian_Toro\Desktop\Platzigram>

C:\Users\Julian_Toro\Desktop\Platzigram>cd
C:\Users\Julian_Toro\Desktop\Platzi
gram

Diego Ortega

student•

Hola que tal, a mi también me salió el mismo error y lo solucioné instalando otra vez la libreria node-sass, con el comando: npm install node-sass. No se si sea la mejor solución pero espero te sirva

Diego Diaz

student•

hola untenta correr npm
rebuild node-sass

Iván Bello Sanchéz

student•

Ya mire todo mi codigo y esta bien, sin embargo no me muestra las secciones home y signup. No se muestran y en la consola me aparece este error. Alguien me puede ayudar.

Algoritmo resumen no admitido en el atributo integrity: "a256" /
El atributo integrity no contiene ningún metadato válido. /
Este sitio hace uso de un certificado SHA-1; se recomienda que use certificados con algoritmos de firma que usen funciones hash más fuertes que SHA-1

Iván Bello Sanchéz

student•

Problema solucionado, tenia mal escrito el innerHTML, bendita sintaxis.

Henry Tabima Giraldo

student•

si de todas maneras los links preguntan al servidor. no se supone que igual recarga la pagina?

Sergio Daniel Xalambrí

student•

Cuando usas page.js los links que apunten a rutas que están definidos en page.js no recargar la página, en vez de eso se ejecuta una función donde se pueden hacer muchas cosas, como pedir datos a un servidor mediante AJAX y luego renderizar un HTML con esos datos.

Pedirle datos al servidor no significa recargar la página, mediante AJAX podes pedir solo la data sin el HTML que genera el servidor y luego generar el HTML en el navegador, de esta forma no ocurre un pantallazo blanco al cambiar de página, de hecho tenés más control sobre estos cambios de página.

Armando Alamilla Cuellar

student•

Cuando implemento las rutas en index.js para / y /signup utilizando page.js se me pierde el footer. ¿cómo puedo solucionar esto?

var page = require('page');
var main = document.getElementById('main-container');

page('/', function (ctx, next) {
	main.innerHTML = 'Home <a href="/signup">Signup</a>';
});

page('/signup', function (ctx, next) {
	main.innerHTML = 'Signup <a href="/no-existe">No-existe</a>'
});

page();

Diego Forero

Team Platzi•

El problema es que estas sobre escribiendo el contenido de main-container, si tienes footer dentro del main-container por eso se pierde.

Armando Alamilla Cuellar

student•

¿cómo puedo hacer para no sobreescribirlo?

Ruben Eduardo Acosta Vela

student•

Para hacer una single page application mejor usamos React.

Alejandro Moreno

student•

Hola, vengo trabajando con page hace un tiempo y ahora tengo un problema cuando lo utilizo en módulos que se exportan, ya que las rutas no son reconocidas y no se ejecutan. En el siguiente caso si importo $container en index principal la ruta page('/') deja de funcionar. Si no lo importo funciona normal.
Agradezco la ayuda.

- index.js (principal)

 import page from 'page'  
 import $container from 'client/container'//si no lo importo funciona  
   
 page('/', function(ctx, next) {  
    alert('Hola desde home')         
  })  
 page('/api/service', function (ctx,next){  
    alert('exec some service')  
 }

client/container.js

import $ from 'jquery';  
import page from 'page';  
  
var $container= $("#container");  
$container.on('click', function(ev) {      
page('/api/service');  
})  
  
page();  
export default $bodyContainer

Sacha Lifszyc

teacher•

recuerda que page exporta un objeto y al finalizar de configurar todas las rutas hay que llamar a la función page de la siguiente manera: page() como estás haciendo al final del archivo client/container.js para que las rutas funcionen

deberías llamar a esa función en tu archivo principal y una única vez, no donde lo utilizas para configurar rutas o navegar en el sitio como por ej: page('/api/service')

te sirvió eso?

Sergio Daniel Xalambrí

student•

Te recomiendo que en vez de definir las rutas en múltiples archivos crees un único archivo de rutas y crees un archivo por ruta solo con la función que se va a ejecutar (el controlador), de esa forma tus rutas quedan en un único lugar y son fáciles de ver todas de una y los controladores están por fuera en módulos.

Wilson Naranjo

student•

Cuando implemento las rutas en index.js para / y /signup utilizando page.js se me pierde el footer. He verificado el index.pub y veo que el Id main-container se encuentra bien definido. Me pueden ayudar a identificar que pasa?

var page = require('page');
var main = document.getElementById('main-container');

page('/', function (ctx, next) {
main.innerHTML = 'Home <a href="/signup">Signup</a>';
})

page('/signup', function (ctx, next) {
main.innerHTML = 'Signup <a href="/">Home</a>';
})

page();

Armando Alamilla Cuellar

student•

Me ha pasado lo mismo 😦
¿Alguien sabe cómo solucionarlo?

Victor Alwin Hércules Carranza

student•

Ten cuidado con las tabs en el index.pug, es probable que tu footer esté dentro de main-container … el footer debe estar a la misma “altura”, osea a la par del main-container, no dentro

Evert Escalante

student•

Tal vez vayan a tener un problema cuando carguen sus enlaces ‘/’, ‘/signup’ en el cual les va a salir el contenido establecido en el innerHTML pero no el footer.
En este caso:
Ten cuidado con las tabs en el index.pug, es probable que tu footer esté dentro de main-container … el footer debe estar a la misma “altura”, osea a la par del main-container, no dentro

crdito para @Vktor

Wellington Gabriel Muñoz Vargas

student•

Hola, necesito ayuda en este codigo por favor.

const page = require('page')

const main = document.getElementById("main-container")

page('/', (ctx, nex) => { main.innerHTML = "Home page" });

page('/about', (ctx, nex) => { main.innerHTML = "About Page"

})

page()

Cuando intento correr el servidor me dice: C:\Users\WELLINGTON\desktop\platzi\platzigram\src\index.js:4 const main = document.getElementById("main-container") ^

ReferenceError: document is not defined

Cristhian Hernandez

student•

Hola donde tienes el script en tu html? <script src="index.js"> asegurate de que este al final de tu html antes del body.

Ricardo Portillo

student•

Sigo diciendo que los cursos deben estar por escrito. Leer es mas rápido para algunos que ver un largo video.

Ronald Salazar Bilbao

student•

como?

Martin Paez

student•

Quizas ciertas cosas (como ya lo estan implementando) pero tiene un impacto mucho mayor y practico ralizarlo en video

Santiago Nuñez Nuñez

student•

Buenas, una pregunta, usar page seria un equivalente a usar routes en angular? Hay alguna ventaja en usa una u otra opcion si fueran equivalentes? Gracias !

Sergio Daniel Xalambrí

student•

Si haceb los mismo, la diferencia es que page no requiere de angular por lo que si no usas este framework (como en el curso) podes usarlo.

Si vas a usar angular lo mejor es que uses o su sistema de rutas o UI-router, si no page o alguna otra opción son buenas.

Giancarlo Vera Burgos

student•

Hice un cambio en el orden del menú para que los enlaces no se cambien de lugar al ir de 'home' a 'signup':

page('/', function(ctx, next){

   main.innerHTML = 'Home <a href="/signup">Signup</a>';

})

page('/signup', function(ctx, next){

   main.innerHTML = '<a href="/">Home</a> Signup';

})

Francisco Almazan

student•

Me pregunto si, se puede gestionar rutas en partes diferente de una misma pagina al estilo de UIrouter de angular ?