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

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

转载作者：行者123 更新时间：2023-11-28 18:58:44

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

这是我的目录 View :

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

文章推荐： python - tf.abs() 函数从复数输入张量生成复数输出张量

文章推荐： css - float 元素正确避免滚动条

Javascript AJAX 调用 Jquery 调用
为了让我的代码几乎完全用 Jquery 编写，我想用 Jquery 重写 AJAX 调用。这是从网页到 Tomcat servlet 的调用。我目前情况的类似代码: var http = new
Java 调用 C 调用 Java
我想使用 JNI 从 Java 调用 C 函数。在 C 函数中，我想创建一个 JVM 并调用一些 Java 对象。当我尝试创建 JVM 时，JNI_CreateJavaVM 返回 -1。所以，我想知
javascript - 调用 javascript 函数以从无法按预期工作的表单进行 AJAX 调用
环顾四周，我发现从 HTML 调用 Javascript 函数的最佳方法是将函数本身放在 HTML 中，而不是外部 Javascript 文件。所以我一直在网上四处寻找，找到了一些简短的教程，我可以根
ajax - 为什么我不能从 Angular 调用 ajax 调用
我有这个组件: import {Component} from 'angular2/core'; import {UserServices} from '../services/UserService
openssl - 如果客户端使用 BIO_* 调用，是否需要服务器上的 BIO_* 调用？
我正在尝试用 C 实现一个简单的 OpenSSL 客户端/服务器模型，并且对 BIO_* 调用的使用感到好奇，与原始 SSL_* 调用相比，它允许一些不错的功能。我对此比较陌生，所以我可能会完全错误
javascript - 根据先前的 Ajax 调用，根据用户确认执行 Ajax 调用
我正在处理有关异步调用的难题: 一个 JQuery 函数在用户点击时执行，然后调用一个 php 文件来检查用户输入是否与数据库中已有的信息重叠。如果是这样，则应提示用户确认是否要继续或取消，如果他单击
java - 验证私有(private)构造函数未使用 JMockit 调用/调用
我有以下类(class)。 public Task { public static Task getInstance(String taskName) { return new
c++ - 调用 QSound 调用，它们之间有延迟 Qt C++
嘿，我正在构建一个小游戏，我正在通过制作一个数字 vector 来创建关卡，该数字 vector 通过枚举与 1-4 种颜色相关联。问题是循环(在 Simon::loadChallenge 中)我将颜
Java 异步 api 调用 - 即发即忘 http 调用
我有一个java spring boot api(数据接收器)，客户端调用它来保存一些数据。一旦我完成了数据的持久化，我想进行另一个 api 调用(应该处理持久化的数据 - 数据聚合器)，它应该自行异
c# - 如何从 Paypal 调用 DoDirectPayment API 调用
首先，这涉及桌面应用程序而不是 ASP .Net 应用程序。我已经为我的项目添加了一个 Web 引用，并构建了各种数据对象，例如 PayerInfo、Address 和 CreditCard。但问题
f# - 如何从 FAKE 调用/调用 F# 编译器 fsc？
我如何告诉 FAKE 编译 .fs文件使用 fsc ? 解释如何传递参数的奖励积分，如 -a和 -target:dll . 编辑:我应该澄清一下，我正在尝试在没有 MSBuild/xbuild/.sl
javascript - render 没有被一个 api 调用，而是被另一个 api 调用
我使用下划线模板配置了一个简单的主干模型和 View 。两个单独的 API 使用完全相同的配置。 API 1 按预期工作。要重现该问题，请注释掉 API 1 的 URL，并取消注释 API 2 的
php - OOP 或 MySQL 调用。生成对象还是直接从 MySQL 调用？
我不确定什么是更好的做法或更现实的做法。我希望从头开始创建目录系统，但不确定最佳方法是什么。我想我在需要显示信息时使用对象，例如 info.php?id=100。有这样的代码用于显示 Game.cl
python - child 调用 parent ， parent 调用 child ......或不
from datetime import timedelta class A: def __abs__(self): return -self class B1(A):
java - 调用/调用 void 方法(Java 作业 - 生命游戏示例)
我在操作此生命游戏示例代码中的数组时遇到问题。情况: “生命游戏”是约翰·康威发明的一种细胞自动化技术。它由一个细胞网格组成，这些细胞可以根据数学规则生存/死亡/繁殖。该网格中的活细胞和死细胞通过
调用 read() 返回 0 但缓冲区已更改，调用 fread() 读取相同偏移量时不会发生
如果我像这样调用 read() 来读取文件: unsigned char buf[512]; memset(buf, 0, sizeof(unsigned char) * 512); int fd;
调用 "start"启动程序，调用 "stop"关闭 C 中的当前实例
我用 C 编写了一个简单的服务器，并希望调用它的功能与调用其他 C 守护程序的功能相同(例如使用 ./ftpd start 调用它并使用 ./ftpd stop 关闭该实例)。显然我遇到的问题是我不知
powershell - 可以从 cmd 调用 headless，但不能从 powershell 调用 headless
在 dos 中，当我粘贴此命令时它会起作用: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://google.
powershell - 可以从 cmd 调用 headless，但不能从 powershell 调用 headless
在 dos 中，当我粘贴此命令时它会起作用: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" https://google.
python - 调用 python3 显示错误，调用 python 启动 python2.7
我希望能够从 cmd 在我的 Windows 10 计算机上调用 python3。我已重新安装 Python3.7 以确保选择“添加到路径”选项，但仍无法调用 python3 并使 CMD 启动 P

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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