如何在angular和nodejs之間進行通信？

節點：app.js如何在angular和nodejs之間進行通信？

var http = require("http"); 
var MongoClient = require('mongodb').MongoClient; 
var express = require('express'); 
var app = express(); 
var mongoose = require('mongoose'); 
var url = 'mongodb://localhost:27017/webshop'; 
var assert = require('assert'); 
mongoose.connect(url); 
var products = mongoose.model('products', { 
category: String, 
type: String, 
nme: String, 
socket: Number, 
clock: Number 
}); 
app.listen(3000, function() { 
    console.log('Example app listening on port 3000!'); 
}); 
app.use(express.static(__dirname + '/public')); 
app.get('/products', function (req, res) { 
    console.log("products"); 
    //Lets try to Find all products 
    products.find(function (err, userObj) { 
     if (err) { 
      console.log(err); 
      res.send(err); 
     } else if (userObj) { 
      console.log('Found:', userObj); 
      res.json(userObj); 
     //res.sendFile('views/aboutus.html', {root: 'public',data:userObj}); 
     } else { 
      console.log('Products not found!'); 
     } 
    }); 
});

products.html放在：

<!DOCTYPE html> 
<html lang="en" ng-app="WebShop"> 
<head> 
<meta charset="UTF-8"> 
<title>HELL</title> 
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css"> 
<link href="../stylesheets/style.css" rel="stylesheet"> 
<script src="../bower_components/jquery/dist/jquery.min.js"></script> 
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"> </script> 
<script src="../bower_components/angular/angular.min.js"></script> 
<script src="../javascripts/app.js"></script> 
</head> 
<body ng-controller="mainController"> 
<table> 
    <tr> 
     <th>Category</th> 
     <th>Type</th> 
     <th>Name</th> 
     <th>Socket</th> 
     <th>Clock</th> 
    </tr> 
    <tr ng-repeat="product in products"> 
     <td>{{product.category}}</td> 
     <td>{{product.type}}</td> 
     <td>{{product.name}}</td> 
     <td>{{product.socket}}</td> 
     <td>{{product.clock}}</td> 
    </tr> 
</table> 
</body> 
</html>

角：

var app = angular.module('WebShop', ['ngResource', 'ngRoute']); 
app.controller('mainController',function($scope, $http,Products) { 
var products = Products.get(); 
console.log(products); 
$http.get('/products') 
    .success(function (data) { 
     console.log("http get products"); 
     $scope.products = data; 
     console.log(data); 
    }) 
    .error(function (data) { 
     console.log('Error: ' + data); 
    }); 
}); 

app.factory('Products', ['$resource', function($resource) { 
return $resource('/products', null, 
    { 
     'get': { method:'get' } 
    }); 
}]);

所以我的問題是...當我去/產品我得到的JSON對象在網頁上...但我想使用角度和HTML文件...所以我想獲得角度數組，我想在屏幕上使用products.html查看.. ..但是現在我只看對象的數組。有人能幫助我嗎？我想我不明白AngularJs和NodeJS之間的溝通。我真的不知道如何發送到角度以及如何使用具有角標籤/屬性的html來顯示結果。非常感謝！

來源

2016-09-28 kodaek99

您正在返回一個JSON用戶對象作爲響應並期待一個數組，JSON是javascript對象記號，因此它就像一個關聯數組，似乎您使用mongoDB作爲以JSON形式存儲對象的數據庫。如果您想將JSON響應轉換爲屬性數組作爲鍵值對，您可以參考： Converting JSON Object into Javascript array 或者可能會改變您在nodejs中編寫服務的方式。 -V

來源

2016-09-28 12:08:15 vaibhav

如果u返回響應作爲JSON則可以使用下面的例子。

app.js

var express = require('express'); 
var app = express(); 
var path = require('path'); 

app.get('/', function (req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

app.get('/products', function (req, res) { 
    var products = { 
     1: { 
      name: "Product 1", 
      description: "This is an awesome product" 
     }, 
     2: { 
      name: "Product 2", 
      description: "This is also an awesome product" 
     } 
    }; 
    res.writeHead(200, {"Content-Type": "application/json"}); 
    res.end(JSON.stringify(products)); 
}); 

app.listen(3000);

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular JS</title> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="ProductController as product"> 
    <div ng-repeat="p in product"> 
     <h1>{{p.name}}</h1> 
     <p>{{p.description}}</p> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script> 
    var app = angular.module('myApp', []); 
    app.controller('ProductController', function ($scope, $http) { 
     $http.get("http://localhost:3000/products") 
       .then(function (response) { 
        console.log(response.data); 
        $scope.product = response.data; 
       }); 
    }); 
</script> 
</body> 
</html>

終於運行

node app.js

，去http://localhost:3000

來源

2016-09-28 13:47:04

回答

相關問題