如何从 Angular JS API 调用 Node.js Web API？答案

【问题标题】：How to call Node.js Web API from Angular JS API?如何从 Angular JS API 调用 Node.js Web API？
【发布时间】：2016-01-08 11:35:45
【问题描述】：

我想将整个 HTML 转换为 JADE，但是 ((record.name}} 不起作用。因此无法获取和打印值。我在此处发布完整文件

这是我的目录视图：

这是我的 JSON 文件 (customerList.json)：

[{"name":"Rohan","add":"Sec 49, Noida"}, 
{"name":"Sam","add":"Sec 63, Noida"},
{"name":"Jack","add":"Sec 15, Noida"}]

这是我的观点（index.html）

<!DOCTYPE html>
<html data-ng-app="myApp">

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.0-beta.5/angular.js" data-semver="1.4.0-beta.5" data-require="angular.js@*"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="/js/customerController.js"></script>
    <script src="/js/dataService.js"></script>
    <script src="/json/customerList.json"></script>
  </head>

  <body>
    <div data-ng-controller="CustomerController as vm">
      <table class="table table-striped table-hover">
        <tbody>
          <tr data-ng-repeat="record in vm.data">
            <td>{{record.name}}</td>
            <td>{{record.add}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

这是我的控制器 (customerController.js)：

  (function(){

var app = angular.module('myApp', []);

app.controller('CustomerController', CustomerController);

CustomerController.$inject = ["dataService"];

function CustomerController( dataService) {
  var vm = this;

  activate();

    function activate() {
      dataService.GetData()
        .then(function(results) {
          vm.data = results;
        },
          function(error) {})
        .finally(function() {

        });
    }
  }
})();

这是我的服务 (dataService.js)：

 (function() {
      'use strict';


      angular.module('myApp')
        .factory('dataService', dataService);

      dataService.$inject = ['$q', '$timeout', '$http'];

      function dataService($q, $timeout, $http) {
      var data = [];

      console.log("Number of table entries is: " + data.length);

        var promise = $http.get('customerList.json');
        promise.then(function(response) {
        data = response.data;
        console.log("Number of table entries is now: " + data.length);
        });

        return {
          GetData: getData
        };

        function getData() {

          return $q(function(resolve, reject) {
            $timeout(function() {
              resolve(data);
            }, 3000);

          });

        }
      }
  })();

我必须将此 index.html 转换为 index.jade，而且这应该是带有 Express.js 的 Node.js API。但我已经完成了使用 Angular.js。请帮忙。

我收到以下错误：

GET http://localhost:3000/js/customerController.js 
localhost/:1 GET http://localhost:3000/js/dataService.js 
localhost/:1 GET http://localhost:3000/json/customerList.json 
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.0-beta.5/$injector/nomod?p0=app
    at REGEX_STRING_REGEXP (https://code.angularjs.org/1.4.0-beta.5/angular.js:68:12)
    at https://code.angularjs.org/1.4.0-beta.5/angular.js:1841:17
    at ensure (https://code.angularjs.org/1.4.0-beta.5/angular.js:1765:38)
    at module (https://code.angularjs.org/1.4.0-beta.5/angular.js:1839:14)
    at https://code.angularjs.org/1.4.0-beta.5/angular.js:4172:22
    at forEach (https://code.angularjs.org/1.4.0-beta.5/angular.js:328:20)
    at loadModules (https://code.angularjs.org/1.4.0-beta.5/angular.js:4156:5)
    at createInjector (https://code.angularjs.org/1.4.0-beta.5/angular.js:4082:11)
    at doBootstrap (https://code.angularjs.org/1.4.0-beta.5/angular.js:1514:20)
    at bootstrap (https://code.angularjs.org/1.4.0-beta.5/angular.js:1535:12)
http://errors.angularjs.org/1.4.0-beta.5/$injector/modulerr?p0=app&p1=Error…0(https%3A%2F%2Fcode.angularjs.org%2F1.4.0-beta.5%2Fangular.js%3A1535%3A12)REGEX_STRING_REGEXP @ angular.js:68(anonymous function) @ angular.js:4195forEach @ angular.js:328loadModules @ angular.js:4156createInjector @ angular.js:4082doBootstrap @ angular.js:1514bootstrap @ angular.js:1535angularInit @ angular.js:1429(anonymous function) @ angular.js:27245n.Callbacks.j @ jquery-2.1.4.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.4.min.js:2n.extend.ready @ jquery-2.1.4.min.js:2I @ jquery-2.1.4.min.js:2

【问题讨论】：

尝试重新证明这是一个很好的 node.js 框架：-)
我不确定我是否理解。你有运行节点服务器吗？你在使用 Express 之类的网络框架吗？
是的。我正在使用 express.js 并且我的 node.js 服务正在运行
你能发布你的 node.js 代码吗？你的服务器后端？
@NitinJain 下面的回答有帮助吗？

标签： javascript json angularjs node.js

【解决方案1】：

不太清楚您是如何设置节点服务器的，但我在这里有一个小型工作示例，您可能可以将其集成到您的代码中：

服务器（server.js）：

var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');

app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(morgan('dev'));

app.all('/*', function(request, response, next) {
      response.header("Access-Control-Allow-Origin", "*");
      response.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
      response.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
      if (request.method == 'OPTIONS') {
            response.status(200).end();
      } else {
            next();
      }
});

app.use('/', require('./routes.js'));

app.use(function (error, request, response, next) {
      console.error(error.stack);
      response.status(400).send(error.message);
});

app.set('port', process.env.PORT || 5001);

var server = app.listen(app.get('port'), function() {
  console.log('Node server listening on port ' + server.address().port + ".");
});

路线（routes.js）：

var express = require('express');
var router = express.Router();
var test = require('./test.js');

router.get('/test', test.get);

module.exports = router;

逻辑（test.js）：

var fs = require('fs');
var path = require('path');

module.exports = {
    get: function(request, response) {
        fs.readFile(path.join(__dirname, './data.json'), 'utf8', function (error, data) {
            if (error) {
                throw error;
            }
            response.send(JSON.parse(data));
        });
    }
}

在你的 package.json 我假设你有：

  "dependencies": {
    "body-parser": "^1.13.2",
    "express": "^4.13.1",
    "morgan": "^1.6.1"
  },

尽管您不需要 morgan 来实现此功能，但很高兴能够看到您的 http 请求通过控制台进行测试。

此解决方案还假设您在根目录中拥有所有内容，并且您将 JSON 保存在名为“data.json”的文件中，因此请根据需要调整文件夹结构和命名。这样，您只需向http://localhost:5001/test 发送一个 GET 请求，您就会收到您的 JSON 数据。

更新：

这是一些额外的角度代码：

首先，我建议对您的代码进行一些重组/重构。将您的应用与控制器分开声明。我建议使用三个文件：您的模块 (app.js)、您的控制器 (customerController.js) 和您的服务 (dataService.js)。

模块（app.js）：

var app = angular.module('myApp', []);

控制器（customerController.js）：

angular.module('myApp').controller('CustomerController', ['DataService',
    function(DataService) {
          var vm = this;
          activate();

          function activate() {
               DataService.test()
               .then(function(results) {
                    vm.data = results;
               }, function(error) {})
               .finally(function() {

               });
          }
    }
]);

服务（dataService.js）：

angular.module('myApp').factory("DataService",[ '$q', '$timeout', '$http',
    function($q, $timeout, $http) {
        return {
            test: function() {
                return $http({
                    url: 'test',
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).success(function(data, status, headers, config) {
                    console.log("Success!");
                    return data;
                }).error(function(data, status, headers, config) {
                    console.log("Error.");
                });
            }
        };
    }
]);

按此顺序包含这些文件：

<script src="/js/app.js"></script>
<script src="/js/customerController.js"></script>
<script src="/js/dataService.json"></script>

另外，不要在你的头部标签中包含脚本文件，将它们包含在你身体的最底部。如果您将它们包含在头部，那么它们将阻止您的页面在完全加载之前呈现。

【讨论】：

@NitinJain 这有帮助吗？