RudziankoŇ≠ RudziankoŇ≠ - 4 months ago 7
Ajax Question

AngularJS: fetch json from server using AJAX

I am looking at this tutorial. And I have such code:

<!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
is returning following
json
:

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

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

]
}
},
//...
]


But I see in a browser networking that request wasn't fire. What have I done wrong?

Answer

Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".

Also remove one of the ng-app directives either from the the body tag or the html tag.

It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.