AngularJS:使用AJAX从服务器获取json

时间:2016-08-04 10:27:20

标签: angularjs json ajax

我正在看这个tutorial。我有这样的代码:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>SPA book_store</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("http://localhost:8080/book_store/rest/books_json/get")
                .then(function(response) {
                    $scope.books = response.data;
                });
    });
</script>

<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
    <li ng-repeat="book in books | filter:nameText | orderBy:'name'">
        {{book.name}} - {{book.price}}
    </li>
</ul>
</div>

</body>
</html>  

http://localhost:8080/book_store/rest/books_json/get正在json之后返回:

[  
   {  
      "book_id":1,
      "name":"Book1",
      "bought":false,
      "genre":"MR",
      "price":20,
      "users":[  

      ],
      "author":{  
         "author_id":1,
         "name":"Gogol",
         "books":[  

         ]
      }
   },
//...
]

但我在浏览器网络中看到请求并不激烈。我做错了什么?

1 个答案:

答案 0 :(得分:1)

从html标记中删除ng-app=""或提供模块名称ng-app="MyApp"

还可以从body标签或html标签中删除其中一个ng-app指令。

如果您只使用一个角度应用程序,最好在HTML标记上使用ng-app指令。