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
enclient/app/app.less
- archivos
scss
enclient/app/app.scss
- archivos
stylus
enclient/app/app.styl
- archivos
css
enclient/index.html
- archivos
js
enclient/index.html
- archivos
babel
/typescript
tempjs
enclient/index.html
- archivos
typescript types
entsconfig.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.