AngularJs 网络服务

AngularJs Web service

我想从中获取书名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!')
});

此代码是我的 Angularjs 网络服务调用,名为 hello.js

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>

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

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

所以尝试改变

 ng-app="demo"

 ng-app="booksInventoryApp"

并从 <article ng-app="booksInventoryApp">

中删除 ng-app="booksInventoryApp"

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

中删除 ng-app

"The name of your module is whatever you give to it as your first argument, in this case 'booksInventoryApp'. Putting ng-app in the html let's angular know what module you want to use as the main application module. The way it knows which one you want is by matching up the names, otherwise it won't be able to find it."

这里有更多解释ng-app

您现在看到的是什么行为?有没有错误?

我觉得代码没问题。单个页面中可以有多个 angular 应用程序(如果这是您的意图)。

我看到的问题是响应是一个 JSON 对象而不是数组。所以在HTML中,你要简单的改变

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

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

它应该可以完美运行。