javascript node.js angularjs yeoman sails.js

javascript - AngularJS+sails.js



node.js yeoman (5)

Estoy desarrollando una aplicación que puede utilizar sails.js para back-end y AngularJS para front-end. Pensé que crearía una aplicación angular usando el generador angular Yeoman https://github.com/yeoman/generator-angular , y una vez que haya terminado con la lógica del front-end, crearé una aplicación de velas usando,

  1. npm install -g velas
  2. navega nueva aplicación

Y luego transferiré todos mis archivos AngularJS a la carpeta Velas.

Pero lo que pasa es que AngularJS crea una jerarquía de carpetas como esta https://github.com/rishy/angular-jade-stylus-seed y al ejecutar "grunt server" se crea una carpeta "dist" que contiene la versión final de producción .

Por otro lado, después de la jerarquía de la carpeta "velas nueva aplicación" para aplicaciones de velas es como.

  • api
    • adaptadores /
    • controladores /
    • modelos /
    • políticas /
    • servicios/
  • bienes
    • imágenes /
    • js /
    • estilos /
    • favicon.ico
    • robots.txt
  • config /
  • node_modules /
  • puntos de vista
    • casa/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • paquete.JSON

Entonces, mis preguntas son:

  1. Ahora, ¿cómo transfiero mis archivos angulares a este directorio de velas y cómo debería estructurarlo?
  2. Dado que sails usa "velas de elevación" para iniciar un servidor y angular utiliza "servidor gruñido", ¿cuál de ellas debo usar para iniciar el servidor para mi aplicación sailsJs + AngularJs y qué pasa con la carpeta "dist" que se crea después de AngularJS?
  3. ¿Qué cambios tendré que hacer en Gruntfile.js, ya que ahora debería contener el código de Angular y Sails?
  4. ¿Dónde debería guardar mis diferentes vistas y archivos de estilo y cómo debería acceder a los formularios Angular o Sails?

Creo que muchas personas se enfrentan a este problema similar, ya que AngularJS y SailsJs están de moda actualmente. Debería haber una repetición robusta para crear una aplicación AngularJS + SailsJS, que lamentablemente falta ahora.

Dado que Sails es un framework puramente de back-end y Angular es puramente front-end, pueden funcionar juntos muy bien. Puede ser un poco confuso cuando traes el generador angular, pero estos son los pasos básicos si comenzases con la aplicación Angular Seed y Sails v0.10:

  1. Crea una nueva aplicación Sails con sails new myApp
  2. Borre el contenido de la carpeta myApp/assets
  3. Copie los contenidos de la carpeta de la app Angular Seed en myApp/assets
  4. Reemplace los contenidos de myapp/views/layout.ejs con los de la app/index.html Angular Seed app/index.html
  5. Cortar todo el contenido de la etiqueta que no sea script del archivo layout.ejs (todo lo que sigue a la etiqueta <body> y antes de la primera etiqueta <script> y usarlo para reemplazar el contenido de myApp/views/homepage.ejs
  6. Coloque <%-body%> después de la etiqueta <body> en layout.ejs

Luego puede iniciar el servidor con sails lift y verá la aplicación Angular en http://localhost:1337 .

He puesto esto en Github como referencia.

Con este método, no es necesario que hagas nada con el Gruntfile, y nunca llamarás al grunt server es únicamente para probar aplicaciones Angular con su servidor de prueba, que estás reemplazando con Sails. Aún así obtendrá el beneficio de la tarea de sincronizar gruñidos de Sails que mira y sincroniza sus activos de front-end a medida que se modifican.

Si realmente desea usar el generador angular Yeoman, puede intentar generar una aplicación directamente en la carpeta de assets de su aplicación Sails y usar los comandos del generador desde esa carpeta. No lo he usado antes, así que no sé para qué es la carpeta dist, pero parece que todos los módulos de nodo que instala están ahí para soportar el servidor web de prueba (que de nuevo no necesita, ya que tienes Sails) y el banco de pruebas (que siempre es agradable). El único problema que puedo ver es si necesita algunas de las tareas en ese Gruntfile que genera Yeoman. Sails maneja menos compilación y minificación de CSS (en modo de producción), pero no hace nada con Jade o Stylus, por lo que tendrías que agregar esas tareas al Sails Gruntfile si realmente las necesitas.

Debe configurar la tarea predeterminada para copiar la carpeta angular dist en .tmp

Vea la configuración de la tarea en este proyecto Sails Angular

También hice la aplicación de ejemplo "repetición / ejemplo" para Sails.js + Angular. En mi solución, estos están separados para los lados posterior y frontal (dos servidores).

Mi solución también muestra comunicaciones de socket + actualizaciones en vivo dentro de los datos entre los usuarios.

Siéntase libre de probarlo. https://github.com/tarlepp/angular-sailsjs-boilerplate

Tengo un caso de uso similar al tuyo. Usé Yeoman para generar la estructura del proyecto para angularjs. En esta situación, mi solución es:

  1. Utilice ''ronco servir'' para generar la aplicación de una sola página angularjs en la versión minificada y todo debe en la carpeta ''dist''.

  2. En el proyecto routes.js in sails.js, elimine el código de configuración para las vistas:

    ''/'': {view: ''página de inicio''}

  3. Elimine todos los archivos debajo de las vistas y la carpeta de activos de sails.js. Pero asegúrese de no necesitar ningún archivo en la carpeta de activos antes de eliminar todo.

  4. Copie y pegue el sitio web de angularjs minified en la carpeta de activos.

  5. Comience sails.js (velas de elevación) y puede navegar por su sitio web angular en localhost: 1337

Sails.js ahora también mencionó brevemente este método http://sailsjs.org/documentation/concepts/views

sus preguntas son exactamente las razones por las que creé Sailng: https://github.com/ryancp/sailng Es una aplicación de ejemplo / repetitiva que usa las últimas Sails 0.10.0-rc5.

También demuestra cómo usar socket.io dentro de Sails para proporcionar actualizaciones en tiempo real al cliente sin votación ajax.

Clónalo y sigue las instrucciones para tener una mejor idea de cómo usar Sails y Angular juntos.