个人中心
gpt4 book ai didi

javascript - 如何从 Angular JS API 调用 Node.js Web API？

转载 作者：行者123 更新时间：2023-11-28 18:58:44 27 4
gpt4 key购买 nike

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

这是我的目录 View :

enter image description here

这是我的 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>

这是我的 Controller (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 服务器，但我这里有一个小的工作示例，您可以将其集成到您的代码中:

服务器(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 数据。

更新:

这是一些额外的 Angular 代码:

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

模块(app.js):

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

Controller (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>

此外，不要在 head 标签中包含脚本文件，而应将它们包含在 body 的最底部。如果您将它们包含在头部中，那么它们将阻止您的页面呈现，直到它们完全加载。

关于javascript - 如何从 Angular JS API 调用 Node.js Web API？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33056576/

27 4 0
文章推荐： html - 如何处理桌面浏览器和移动浏览器的 HTML/CSS 字体大小？
文章推荐： python - tf.abs() 函数从复数输入张量生成复数输出张量
文章推荐： css - float 元素正确避免滚动条
文章推荐： python - 使用带有 IntervalIndex 的 pandas.cut 后如何重命名类别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com