2016-09-28 2 views
0

노드 :각도와 노드 사이에서 어떻게 통신 할 수 있습니까?

<!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' } 
    }); 
}]); 

그래서 내 문제는 ... 내가 얻을

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 app.js json 객체를 웹 페이지에 ...하지만 각도 및 HTML 파일을 사용하고 싶습니다 ... 그래서 각도 배열을 얻고 싶습니다 및 products.html 사용하여 화면에서 볼 싶습니다 .. ..하지만 지금은 객체의 배열 만 봅니다. 아무도 나에게 도움이 될 수 있니? 나는 AngularJs와 NodeJS 사이의 통신을 이해하지 못한다고 생각합니다. 그리고 난 앵귤러로 보내는 법과 앵귤러 태그/속성이있는 html을 사용하여 결과를 표시하는 방법을 알지 못합니다. 고마워요!

답변

0

JSON 사용자 객체를 응답으로 반환하고 배열을 기대하고 있습니다. JSON은 자바 스크립트 객체 표기법이므로 연관 배열과 같습니다. mongoDB를 JSON 형식의 객체를 저장하는 데이터베이스로 사용하는 것 같습니다. JSON 응답을 키 값 쌍으로 속성 배열로 변환하려면 다음을 참조하십시오. Converting JSON Object into Javascript array 또는 nodejs에서 서비스 작성 방법을 변경할 수 있습니다. -V

0

u가 응답을 JSON으로 반환하면 다음 예제를 사용할 수 있습니다.

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

로 이동 app.js
관련 문제