Comment puis-je passer les variables du serveur node.js dans ma vue angulaire / html?

J'ai cette route dans mon fichier app.js qui démarre le serveur

app.get('/view/:item_id', function(req,res){ var A = 5; res.render('view_item'); 

Et j'ai ceci dans mon view_item.html:

 <p>{{A}}</p> 

Je veux qu'il affiche la valeur de la variable – 5. Si j'utilisais un moteur de modèle tel que jade, il serait facile. Je pourrais changer cette troisième ligne du code de mon serveur pour res.render({A:A},'view_item');

Mais j'utilise html comme mon moteur de modèle. Mes recherches jusqu'à maintenant m'ont dit que l'utilisation d'un moteur modèle avec angulaire est généralement une mauvaise idée, et il existe toujours un moyen de le faire en utilisant le système de modèle intégré d'angular. Alors, comment puis-je faire cela? Est-ce que je le passe en quelque sorte à la portée de $ et inclure comme

 <script> $scope.A = {{A}}; </script> 

Je n'ai pas vu cela faire n'importe où, donc je ne pense pas que c'est le chemin à parcourir.

Il s'agit d'un processus en deux étapes.

  1. Tout d'abord, vous devez utiliser une bibliothèque (bibliothèque de serveurs) comme express dans un nœud pour définir les routages appropriés (REST Services) pour répondre à vos requêtes:

Du côté serveur

 //app = express(); app.get('/api/:paramID1/:paramID2',function(req, res){ return res.json({ A: 5 }); }); 
  1. Du côté client , vous avez besoin d'un appel ajax pour appeler le service comme:

     $http.get( "/api/1/abc").success(function( data ) { $scope.A= data; //from your sample; alert( "Load was performed. " + data ); }); 

Notez que lorsque vous utilisez REST, il existe différents types de «méthodes» pouvant être invoquées en fonction de vos besoins, tels que POST, DELETE, UPDATE ou celui qui vient d'être mentionné dans l'exemple GET.

Si vous utilisez Angular, vous devriez probablement créer une application en une seule page – cela s'appliquerait à la plupart des cadres avancés modernes. Pour les SPA, vous commencez avec un fichier html basique (probablement index.html ). Ensuite, votre cadre gère le rendu de tout le reste. Votre serveur peut également émettre des modèles, mais il ne rendra jamais rien lui-même.

 app.get('/view/:item_id', function(req,res){ 

Cela ne devrait pas être le rendu ni renvoyer un code HTML. Au lieu de cela, vous devriez retourner les données que l'interface utilisera pour rendre – de préférence comme JSON.

 res.json({A: 5}); 

Ensuite, avec Angular, vous feriez quelque chose comme

 $http.get("/view/1").success(function (data) { ctrl.A = data.A; }); 

Votre html / template aurait quelque chose comme

 <div ng-controller="ctrl as ctrl"> <div>{{ctrl.A}}</div> 

Une fois que $http.get terminé, ctrl.A est peuplé.

Jetez un oeil sur le cadre de Catberry.js . C'est la solution que vous recherchez.