50 votes

rishy avatar

AngularJS + SailsJS

Demandé el 21 de Février, 2014
Quand la question a-t-elle été
5724 affichage
Nombre de visites la question a
2 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je développe une application qui permet d'utiliser SailsJS pour le back-end et AngularJS pour le Front-end. J'ai pensé que je vais créer un Angulaire de l'Application à l'aide de Yeoman-angulaire générateur https://github.com/yeoman/generator-angularet une fois que je suis fait avec le front-end de la logique, je vais créer un voiles application à l'aide,

  1. npm install-g voiles
  2. voiles nouvelle application

Et puis je vais transférer tous mes AngularJS fichiers pour les Voiles dossier.

Mais le truc, c'est que AngularJS crée crée une hiérarchie de dossiers comme ça https://github.com/rishy/angular-jade-stylus-seed et sur l'exécution "grunt serveur" un répertoire "dist" est créé, qui contient la version de production finale.

D'autre part, d'après "les voiles nouvelle application" hiérarchie de dossiers pour les voiles de l'app est comme.

  • api
    • adaptateurs/
    • contrôleurs/
    • modèles/
    • politiques/
    • services/
  • actifs
    • images/
    • js/
    • styles/
    • favicon.ico
    • robots.txt
  • config/
  • node_modules/
  • vues
    • maison/
    • 403.ejs
    • 404.ejs
    • 500.ejs
    • de mise en page.ejs
  • Gruntfile.js
  • app.js
  • package.JSON

Donc, Mes questions sont les suivantes:

  1. Maintenant, comment puis-je transférer mon Angulaire des Fichiers de cette voiles répertoire et comment le structurer?
  2. Depuis voiles utilise des "voiles de l'ascenseur" pour démarrer un serveur et angulaire utilise des "gros serveur", qui l'un de ceux devrais-je utiliser pour démarrer le serveur pour mon sailsJs + AngularJs application et que dire de la "dist" est un dossier qui est créé après AngularJS?
  3. Quels changements que j'ai à faire dans la Gruntfile.js car il doit maintenant contenir le code de la fois Anguleux et les Voiles?
  4. Où dois-je conserver mes différents points de vue et des fichiers de style et comment dois-je accéder à ceux-forme Angulaire ou de Voiles?

Je pense que beaucoup de gens sont confrontés à ce même problème depuis AngularJS et SailsJs sont à la mode actuellement. Il devrait y avoir un solide passe-partout pour créer une AngularJS + SailsJS app, qui, malheureusement, manque de droite maintenant.

Demandé el 21 de Février, 2014 par rishy

Réponses

Trop de publicités?

56voto

sgress454 avatar
sgress454 Points 10329

Depuis Voiles est purement back-end-cadre et Angulaire est purement frontal, ils peuvent travailler de pair. Il peut être un peu déroutant lorsque vous apportez de l'angle de générateur, mais ici sont les étapes de base si vous commencez avec l' Angulaire de la Graine application et les Voiles v0.10:

  1. Créer un nouveau Voiles app avec sails new myApp
  2. Effacer le contenu de l' myApp/assets le dossier
  3. Copiez le contenu de l'angle de la Graine app le dossier en myApp/assets
  4. Remplacez le contenu de myapp/views/layout.ejs avec ceux de l'Angulaire de la Graine app/index.html le fichier
  5. Couper tous les non-balise de script, contenu de l' layout.ejs le fichier (tout ce qui est après l' <body> balise et avant la première <script> de la balise et de l'utiliser pour remplacer le contenu d' myApp/views/homepage.ejs
  6. Placez <%-body%> après l' <body> tag layout.ejs

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

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

En utilisant cette méthode, vous n'avez pas besoin de faire quelque chose pour le Gruntfile, et vous ne serez jamais à l'appel grunt server--c'est uniquement pour les tests Angulaire des applications avec leur serveur de test, qui vous remplacez avec des Voiles. Vous aurez toujours le bénéfice de l'Voiles grunt-tâche de synchronisation des montres et synchronise votre front-end actifs lorsqu'ils sont modifiés.

Si vous voulez vraiment utiliser le Yeoman Angulaire generator, vous pouvez essayer de générer une application directement dans l' assets le dossier de votre Voiles application et en utilisant le générateur de commandes à partir de l'intérieur de ce dossier. Je n'ai pas utilisé avant, donc je ne sais pas ce que le dossier dist est, mais il semble que tout le nœud de modules qu'il installe sont là pour soutenir le serveur web de test (qui encore une fois vous n'avez pas besoin, puisque vous avez de Voiles) et de la suite de test (ce qui est toujours agréable). Le seul problème que je peux voir, c'est si vous avez besoin de certaines des tâches qui Gruntfile que Yeoman génère. Voiles poignées de Moins de compilation et de minification CSS (en mode de production), mais il ne fait rien avec le Jade ou le Stylet, donc, vous devez ajouter ces tâches pour les Voiles Gruntfile si vous avez vraiment besoin d'eux.

Répondu el 22 de Février, 2014 par sgress454 (10329 Points )

12voto

Ryan avatar
Ryan Points 81

Vos questions sont exactement pourquoi j'ai créé Sailng: https://github.com/ryancp/sailng Il s'agit d'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 l’utilisation conjointe de Sails et Angular.

Répondu el 10 de Avril, 2014 par Ryan (81 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X