Plunker es un sitio web donde los desarrolladores pueden colaborar en proyectos y compartir sus ideas entre ellos. De hecho, puede colaborar en tiempo real para que todos los miembros del equipo trabajen al mismo tiempo. Plunker es de uso absolutamente gratuito, solo puede registrarse desde Github. Comience a usarlo, y también puede ver su trabajo en vivo, ya que está disponible una vista previa en vivo para que los desarrolladores puedan ver su trabajo en vivo y modificar su código en consecuencia.
Fácil de usar. El sitio web puede ser lento, pero ofrece muchas funciones para tener una experiencia colaborativa divertida.
Plunker es un editor basado en web, con esto, puede crear, editar y ejecutar archivos HTML, CSS y JavaScript directamente desde su navegador. No se requiere una configuración compleja, todos pueden codificar directamente en el navegador de inmediato.
Ahora, lo muy interesante es que cada plunker tiene su propia URL única que puede compartir con amigos/desarrolladores, por lo que es una forma increíble de mostrar su trabajo. Pero no puede editar/modificar el plunker de otra persona. En su lugar, puede bifurcarlo. Como todos saben, Forking crea un nuevo plunker que posee con todos los archivos copiados.
Si su plunker tiene un archivo index.html , puede intentar ejecutar el archivo y puede obtener una vista previa en vivo.
Características de Plunker:
- Nunca pierdas tu trabajo
- Búsqueda en todo el sitio
- Integración de escritorio
- Editor integrable
- Editor de múltiples archivos y múltiples paneles
Estructura de un Plunker Angular: Un Plunker Angular se compone de los siguientes archivos:
- index.html Este es el archivo HTML que contiene todas las bibliotecas y el diseño (Bootstraps) para la aplicación Angular.
- script.ts Este es el archivo principal en el que volcaremos todo nuestro código Angular que pertenece a nuestro proyecto.
- system.config.js Este archivo se usa para la configuración de SystemJS, que maneja la carga de módulos y la compilación de TypeScript en JavaScript.
- tsconfig.json Configuración para el transpilador de TypeScript.
Pasos para ejecutar:
- No requiere configuraciones adicionales, todo lo que puede codificar directamente en la web.
- Este es el enlace oficial de Plunker: https://plnkr.co/ vaya a este sitio web,
- Haga clic en el nuevo botón como se muestra: Esto lo llevará a una ventana emergente
- Ahora obtendrá una ventana emergente que le preguntará qué lenguaje de programación desea codificar, seleccione Plantilla de inicio angular
- Aquí ya hemos discutido Cada archivo en breve (En la estructura de plunker). ¡Puede comenzar a escribir su código y compartirlo con sus amigos cuando necesite ayuda!
- Es solo un ejemplo básico para mostrarle cómo funciona.
Ejemplo:
index.html
<body> <!-- Begin Webpage --> <div class="webpage"> <div class="red-brand-box"> <div class="white-brand-box"></div> </div> <h3 class="presents-text"> Hey Everyone this is Sharath </h3> <h1 class="title"> Plunker is awesome <br /> Believe it! </h1> <button class="cta-button"> Learn today </button> <div class="right-triangle"></div> </div> </body>
Ahora agregue el CSS de acuerdo con usted, como desea que se vea su sitio web.
h1,
p {
font-family: sans-serif;
}
Producción:
Entonces, todo esto sobre plunker, ahora hablemos sobre algunos pros y contras de plunker para darle un toque final y condensar el artículo en un resumen al final.
ventajas :
- Plunker nos permite agregar múltiples archivos al proyecto.
- Esta es una mejor manera que una simple demostración.
- Cuenta con una colaboración de código en tiempo real y vista previa en vivo, pelusa de código.
- El proyecto tiene licencia del MIT.
- Interfaz de usuario muy fácil, nada complejo.
Desventajas:
- Desafortunadamente, el código incrustado no se puede editar directamente. Debe abrirlo en Plunker para realizar cambios con el ejemplo de código.
- El sitio web es un poco lento en comparación con sus competidores.
Publicación traducida automáticamente
Artículo escrito por sharathmajjigi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA