AngularJs 网络服务答案

【问题标题】：AngularJs Web serviceAngularJs 网络服务
【发布时间】：2017-06-03 09:53:42
【问题描述】：

我想从这个 URL 获取书名

http://localhost:3000/greeting

这是我的 nodejs Expressjs 服务器代码

var express = require('express');
var app = express();

app.get('/greeting', function (req, res) {

var books = {
    id : 555,
    name : 'Antony',
    title : 'Do or Die',
    price : {
        inr : 500,
        dollar : 5
        }
    };
    res.json(books);
});

app.listen(3000, function () {
console.log('Example app listening on port 3000!')
});

这段代码是我命名为hello.js的Angularjs网络服务调用

var app = angular.module('booksInventoryApp', []);
app.controller('booksCtrl', function($scope, $http) {
$http.get("http://localhost:3000/greeting")
   .then(function(response) {
  $scope.data = response.data;
  console.log("result"+response.data);
  });
});

这是我的 HTML 代码

<!doctype html>
<html ng-app="demo">
<head>
    <title>Hello AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="hello.js"></script>
</head>

<body>

<article ng-app="booksInventoryApp">
    <section ng-controller="booksCtrl">
        <h2 ng-repeat="book in data.books">{{book.name}}</h2>    
    </section>
</article>




</body>
</html>

我想获取书名...提前致谢..

【问题讨论】：

标签： javascript angularjs node.js express webservice-client

【解决方案1】：

您的主要app 名称是booksInventoryApp，因此您应该包括ng-app="booksInventoryApp"，并且每个页面都有一个ng-app 指令。

所以尝试改变

 ng-app="demo"

到

 ng-app="booksInventoryApp"

并从<article ng-app="booksInventoryApp"> 中删除ng-app="booksInventoryApp"

【讨论】：

【解决方案2】：

您现在看到的行为是什么？有错误吗？

代码在我看来没问题。单个页面中可以有多个角度应用程序（如果这是您想要的）。

我看到的问题是响应是 JSON 对象而不是数组。所以在 HTML 中，你必须简单的改变

<h2 ng-repeat="book in data.books">{{book.name}}</h2>

到

<h2>{{data.name}}</h2>

它应该可以完美运行。

【讨论】：

【解决方案3】：

<div ng-app="booksInventoryApp"> 中对 booksInventoryApp 模块的引用来自angular.module('booksInventoryApp', [])。所以你必须使用ng-app="booksInventoryApp" 而不是ng-app="demo"，并从文章标签中删除ng-app

“您的模块的名称是您作为第一个参数提供的任何名称，在本例中为 'booksInventoryApp'。将 ng-app 放在 html 中，让我们从角度知道您想将哪个模块用作主应用程序模块。它知道你想要哪个的方法是通过匹配名称，否则它将无法找到它。”

更多解释在这里ng-app

【讨论】：