Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例相关的知识，希望对你有一定的参考价值。

server.js代码：

// 内置http模块，提供了http服务器和客户端功能（path模块也是内置模块，而mime是附加模块）
var http=require("http");

// 创建服务器,创建HTTP服务器要调用http.createServer()函数，它只有一个参数，是个回调函数，服务器每次收到http请求后都会调用这个回调函数。服务器每收到一条http请求，都会用新的request和response对象触发请求函数。
var server=http.createServer(function(req,resp){
    console.log("请求地址是:"+req.url);    

    //这样设置才可以解决跨域的请求
    resp.writeHead(200,{"Content-Type":"text/plain;charset=‘utf-8‘",‘Access-Control-Allow-Origin‘:‘*‘,‘Access-Control-Allow-Methods‘:‘PUT,POST,GET,DELETE,OPTIONS‘});

    var arr=[];
    
    // 创建对象
    var emp=new Object;
    emp.name="Atila";
    emp.age=39;
    emp.id="007";
    
    arr.push(emp);
    
    var emp2={};
    emp2.name="凌凌漆";
    emp2.age=29;
    emp2.id="008";
    
    arr.push(emp2);
    
    //  JSON.stringify用于将对象转成JSON文本，JSON.parse用于将JSON文本转成对象
    var retval=JSON.stringify(arr);
    resp.end(retval);// response对象结束响应    
});

// 服务器开始运作监听端口
server.listen(3000,"localhost",function(){
    console.log("服务器开始运作，监听端口3000中...");
});

页面Angularjs代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html  ng-app="notesApp">
    <head>
        <meta charset="utf-8">
        <title>AngularJS取得Nodejs数据</title>
        <script src="angular1.4.6.min.js"></script>
    </head>
 <body>
    <table ng-controller="MainCtrl as ctrl" border="1px">
        <tr ng-repeat="member in ctrl.items">
            <td><span ng-bind=‘member.id‘/></td>    
            <td><span ng-bind=‘member.name‘/></td>           
            <td><span ng-bind=‘member.age‘/></td>
        </tr>
    </table>
  </body>
</html>

<script type="text/javascript">
<!--
    angular.module(‘notesApp‘,[])
     .controller(‘MainCtrl‘,[‘$http‘,function($http){
         
        var self=this;
        self.items=[];

        var url="http://localhost:3000";
           $http.get(url).then(function(response){
               self.items=response.data; 
           },function(errResponse){
               alert(‘error‘+errResponse);           
           });       
     }]);
//-->
</script>

 

以上是关于Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例的主要内容，如果未能解决你的问题，请参考以下文章

在 Node.js 中部署 angularjs 应用程序

请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用？

如何将 REST 与 Node.js 和 AngularJS 一起使用在不同的端口上？

如何在 AngularJS 的索引页面上使用来自 Node.js 的信息

Hogan Js 和 AngularJs 与 Node Js

Node.js & AngularJS 最快最简单的方式来实现认证和授权机制