angularjs获取nodejs response数据的两种方法

最新推荐文章于 2021-03-09 16:05:14 发布

原创最新推荐文章于 2021-03-09 16:05:14 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #众观千象 #每天进步一点点 #学习永无止境 #swig

nodejs 同时被 2 个专栏收录

22 篇文章

订阅专栏

angularjs

17 篇文章

订阅专栏

本文介绍了一种使用Node.js作为服务端与Angularjs作为客户端进行数据交互的方法。服务端通过路由提供数据，客户端利用Angularjs控制器获取并展示这些数据。文章提供了两种实现方案的代码示例。

第一种解决方案：

Nodejs服务端：

router.get('/list', function(req, res) {
    employeeService.queryData(function(data) {
      var v = _.clone(mapping.employeeList);
      v.list = data;
      res.render(mapping.employeeList.view, v);
    });
  });

Angularjs客户端：

app.controller('EmployeeCtrl', ['$scope', function($scope) {
}]);

html页面设置数据（swig）：

<div class="container" ng-controller="EmployeeCtrl" ng-init="list = {= list|json =}">
  <table class="table table-striped">
    <caption><h1>员工列表（—来自网络）</h1></caption>
    <tr>
      <th>#</th>
      <th>编号</th>
      <th>姓名</th>
      <th>部门</th>
      <th>身份证</th>
      <th>生日</th>
      <th>工资</th>
      <th>创建日期</th>
    </tr>
    {% for e in list %}
    <tr>
      <td>{= e.id =}</td>
      <td>{= e.e_num =}</td>
      <td>{= e.name =}</td>
      <td>{= e.department =}</td>
      <td>{= e.idcard =}</td>
      <td>{= e.birthday|date('Y-m-d', -480) =}</td>
      <td>{= e.salary =}</td>
      <td>{= e.create_at|date('Y-m-d H:i:s', -480, 'CCT') =}</td>
    </tr>
    {% endfor %}
    <tr ng-repeat="e in list">
      <td>{{ e.id }}</td>
      <td>{{ e.e_num }}</td>
      <td>{{ e.name }}</td>
      <td>{{ e.department }}</td>
      <td>{{ e.idcard }}</td>
      <td>{{ e.birthday|date:'yyyy-MM-dd' }}</td>
      <td>{{ e.salary|currency:'￥' }}</td>
      <td>{{ e.create_at|date:'yyyy-MM-dd HH:mm:ss' }}</td>
    </tr>
  </table>
</div>

第二种解决方案：

Nodejs服务端：

app.get('/employee/data', function(req, res) {
  .....
  res.json(list);
});

Angularjs客户端：

function EmployeeCtrl($scope, $http) {
  $http.get('/employee/data').success(function(data) {
    $scope.list= data
  })
}