web-dev-qa-db-fra.com

AngularJS + sails.js

Je développe une application qui peut utiliser sails.js pour le back-end et AngularJS pour le front-end. Je pensais que je créerais une application angulaire à l'aide du générateur Yeoman-angular https://github.com/yeoman/generator-angular , et une fois que j'aurais terminé avec la logique frontale, je créerai des voiles application utilisant,

  1. npm installer -g voiles
  2. navigue nouvelle application

Et puis je transférerai tous mes fichiers AngularJS dans le dossier Sails.

Mais le fait est que AngularJS crée crée une hiérarchie de dossiers comme celle-ci https://github.com/rishy/angular-jade-stylus-seed et lors de l’exécution de "grunt server", un dossier "dist" est créé et contient la version de production finale.

Par ailleurs, après la hiérarchie des dossiers "Nouvelle application", comme pour l’application Voiles.

  • api
    • adaptateurs /
    • contrôleurs /
    • des modèles/
    • politiques /
    • prestations de service/
  • les atouts
    • images/
    • js /
    • modes/
    • favicon.ico
    • robots.txt
  • config /
  • node_modules /
  • vues
    • maison/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • layout.ejs
  • Gruntfile.js
  • app.js
  • package.JSON

Alors, mes questions sont:

  1. Maintenant, comment puis-je transférer mes fichiers angulaires dans ce répertoire voiles et comment dois-je le structurer?
  2. Puisque voiles utilise "sails lift" pour démarrer un serveur et angular, il utilise "grunt server". Lequel de ceux-ci dois-je utiliser pour démarrer le serveur de mon application sailsJs + AngularJs et le dossier "dist" créé après AngularJS?
  3. Quels changements dois-je apporter dans le fichier Gruntfile.js, puisqu'il doit désormais contenir le code de Angular et de Sails?
  4. Où devrais-je conserver mes différents fichiers de vues et de styles et comment accéder à ces formulaires Angular ou from Sails?

Je pense que beaucoup de gens sont confrontés à ce problème similaire depuis AngularJS et SailsJs sont à la mode actuellement. Il devrait y avoir un passe-partout robuste pour créer une application AngularJS + SailsJS, qui manque malheureusement à l'heure actuelle.

javascriptnode.jsangularjsyeomansails.js
50
rishy

Puisque Sails est un framework purement back-end et que Angular est purement front-end, ils peuvent bien fonctionner ensemble. Cela peut être un peu déroutant lorsque vous introduisez le générateur angulaire, mais voici les étapes de base si vous débutiez avec le Angular Seed app and Sails v0.10:

  1. Créer une nouvelle application Sails avec sails new myApp
  2. Effacer le contenu du dossier myApp/assets
  3. Copiez le contenu du dossier Angular Seed app dans myApp/assets
  4. Remplacez le contenu de myapp/views/layout.ejs par celui du fichier angulaire Seed app/index.html
  5. Coupez tout le contenu de la balise non script dans le fichier layout.ejs (tout ce qui suit la balise <body> et avant la première balise <script> et utilisez-le pour remplacer le contenu de myApp/views/homepage.ejs
  6. Placez <%-body%> après la balise <body> dans layout.ejs

Vous pouvez ensuite démarrer le serveur avec sails lift et vous verrez l'application Angular à http://localhost:1337.

J'ai mis ceci sur Github pour référence.

En utilisant cette méthode, vous n'avez rien à faire avec le fichier Grunt, et vous n'appelez jamais grunt server-- uniquement pour tester les applications Angular avec leur serveur de test, que vous remplacez par Sails. Vous bénéficierez tout de même de la tâche Sails Grunt-Sync qui surveille et synchronise vos ressources frontales au fur et à mesure de leur modification.

Si vous voulez vraiment utiliser le générateur Yeoman Angular, vous pouvez essayer de générer une application directement dans le dossier assets de votre application Sails et d'utiliser les commandes du générateur à partir de ce dossier. Je ne l’avais jamais utilisé auparavant, donc je ne sais pas à quoi sert le dossier dist, mais il semble que tous les modules de nœuds qu’il installe sont là pour prendre en charge le serveur Web de test (ce vous avez des voiles) et la suite de tests (qui est toujours agréable). Le seul problème que je peux voir est si vous avez besoin de certaines tâches de ce fichier Grunt généré par Yeoman. Sails gère Moins de compilation et de minification CSS (en mode production), mais il ne fait rien avec Jade ou Stylus. Vous devez donc ajouter ces tâches au fichier Sails Gruntfile si vous en avez vraiment besoin.

56
sgress454

vos questions sont exactement pourquoi j'ai créé Sailng: https://github.com/ryancp/sailng C'est un exemple d'application/boilerplate qui utilise la dernière version de Sails 0.10.0-rc5.

Il montre également comment utiliser socket.io dans Sails pour fournir des mises à jour en temps réel au client sans interrogation ajax.

Clonez-le et suivez les instructions pour avoir une meilleure idée de la façon d'utiliser Sails et Angular ensemble.

12
Ryan

J'ai également réalisé un exemple d'application "boilerplate/example" pour Sails.js + Angular. Dans ma solution, ceux-ci sont séparés des côtés arrière et frontal (deux serveurs).

Ma solution illustre également la communication socket + les mises à jour en direct dans les données entre les utilisateurs.

N'hésitez pas à l'essayer. https://github.com/tarlepp/angular-sailsjs-boilerplate

4
tarlepp

J'ai un cas d'utilisation similaire au vôtre. J'ai utilisé Yeoman pour générer la structure de projet pour angularjs. Dans cette situation, ma solution est la suivante:

  1. Utilisez 'grunt serve' pour générer l’application d’une seule page d’angularjs en version détaillée et tout devrait figurer dans le dossier 'dist'.

  2. Dans le projet routes.js du projet sails.js, supprimez le code de configuration pour les vues:

    '/': { voir: 'homepage' }

  3. Supprimez tous les fichiers du dossier sails.js views and assets. Mais assurez-vous simplement que vous n'avez besoin d'aucun fichier dans le dossier des ressources avant de tout supprimer.

  4. Copiez et collez le site Web minified angularjs dans le dossier assets.

  5. Lancez sails.js (élévateur de voiles) et parcourez votre site Web angulaire à l'adresse suivante: 1337

Sails.js a aussi brièvement mentionné cette méthode http://sailsjs.org/documentation/concepts/views

0
afterglowlee

Vous devez configurer la tâche par défaut pour copier le dossier dist angulaire dans .tmp

Voir la configuration des tâches dans ceci Sails Angular project

0
Janka