Categorías
AngularJS Express Javascript MongoDB NodeJS Recursos

angular-fullstack generator, un generador MEAN muy bondadoso

AngularJS Full-Stack generator es un generador para yeoman que nos permite crear nuestros proyectos MongoExpressAngularNode medio montados.

Con medio montados quiero decir que nos crea la estructura de carpetas, nos unas cuantas vistas, rutas, nos hace la conexión a la base de datos, módulos de gestión de usuarios y mucho más!

Instalación:

Instalamos yo, grunt-cli/gulp-cli, bower, y generator-angular-fullstack:

npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack

Creamos una nueva carpeta y navegamos hasta ella:

mkdir micarpeta && cd $_

Run yo angular-fullstack, optionally passing an app name:

yo angular-fullstack codigoDiarioFullstack

Ejecutamos grunt para compilar y descargar todas las dependencias del proyecto, grunt serve para ejecutar la aplicación y lanzarlo al navegador.

Requisitos:

Tener instalado MongoDB y tener el proceso mongod corriendo.

Opciones a la hora de generar un proyecto:

  • Build Systems: Grunt, Gulp
  • Testing
    • Jasmine
    • Mocha + Chai + Sinon
      • Expect
      • Should

Cliente

  • Scripts: Javascript (Babel) o TypeScript
  • Maquetación: HTML o Jade
  • Estilos: CSS, Stylus, Sass, Less
  • Enrutaciones de Angular: ngRoute o ui-router
  • Frameworks CSS: Bootstrap
    • opción de añadir UI Bootstrap

Servidor

Scripts: Javascript (Babel)

Base de datos:

  • Ninguno
  • MongoDB, Sql
    • boilerplate de autenticación
    • Integraciónes de oAuth con Facebook, Twitter y Google
    • Integración de Socket.io 

Inyecciones de estilos:

Tenemos varias tareas predeterminadas en gulp/grunt que detectaran las librerías frontend que instalemos y nos los incluirán en el proyecto automáticamente

  • archivos less en client/app/app.less
  • archivos scss en  client/app/app.scss
  • archivos stylus en client/app/app.styl
  • archivos css en client/index.html
  • archivos js en client/index.html
  • archivos babel/typescript temp js en client/index.html
  • archivos typescript types en tsconfig.client.json & tsconfig.client.test.json

Generadores:

  • App
    • angular-fullstack
  • Lado del servidor
    • angular-fullstack:endpoint
  • Lado del cliente
    • angular-fullstack:route
    • angular-fullstack:controller
    • angular-fullstack:filter
    • angular-fullstack:directive
    • angular-fullstack:service
    • angular-fullstack:provider
    • angular-fullstack:factory
    • angular-fullstack:decorator
  • Deployment
    • angular-fullstack:openshift
    • angular-fullstack:heroku

 

Estas librerias vienen instaladas independientemente de nuestro proyecto

  • angular
  • angular-cookies
  • angular-mocks
  • angular-resource
  • angular-sanitize
  • es5-shim
  • font-awesome
  • json3
  • jquery
  • lodash

 

Y estas otras las podemos instalar dependiendo de las opciones que hayamos elegido a la hora de generar nuestro proyecto:

  • angular-route
  • angular-ui-router
  • angular-socket-io
  • angular-bootstrap
  • bootstrap

 

Podéis leer y saber más en su propio GitHub.

 

Por Deniz M.

Desarrollador a tiempo completo, amante del buen rol y los juegos de plataforma. Mi tiempo libre me gusta invertirlo para ver series y malas peliculas