AngularJS not working - can't pick up variables

Question

I'm new to web designing and angular, and am copying something similar to this, where I consume a RESTful web service and use AngularJS to display the info in the JSON.

It doesn't seem to be working for me. My main.jsp file looks like:

<!doctype html>
<html ng-app>
<head>
    <title>Your Bill</title>

    <!-- Include the AngularJS library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <!-- BillParser script -->
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <div ng-controller="GetBill">
        <p>The ID is {{bill.id}}</p>
        <p>The content is {{bill.content}}</p>
    </div>
</body>
</html>

And my app.js looks like:

function GetBill($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
    success(function(data) {
        $scope.bill = data;
        console.log('INITTED');
    });
}

But it looks like the following on localhost/billparser/index:

The ID is {{bill.id}}

The content is {{bill.content}}

Is there something obvious I'm missing here? Excuse the 'bill' naming, it's going to eventually be something relating to bills, I just want to get Angular working first!

It looks like I'm getting the following error:

https://docs.angularjs.org/error/ng/areq?p0=GetBill&p1=not%20a%20function,%20got%20undefined

What do I need to do to fix this? I've never used js before so this is all new to me!

Thanks for your time.

this is what you want http://stackoverflow.com/questions/26646941/getting-an-error-when-using-ng-controller-in-angularjs-ver-1-3-0/26647015#26647015 — Kalhan.Toress, Jun 28 '15 at 13:27

score 0 · Answer 1 · answered Jun 28 '15 at 13:26

I sure hope that you had this inside the controller as:

app.controller('GetBill', ['$scope', '$http', function($scope , $http) { 

$http.get('http://rest-service.guides.spring.io/greeting').
    success(function(data) {
        $scope.bill = data;
        console.log($scope.bill);
    });
}]);

Check the console for correct data. console.log($scope.bill);

score 0 · Accepted Answer · answered Jun 28 '15 at 13:30

0

It seems to me that you've missed something here: actually creating a Controller and registering it in your AngularJS application.

From The AngularJS documentation on Controllers (link here), that is what your app.js file should look like:

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);

That is the featured example. In your case, more precisely, it would be:

var myApp = angular.module('myApp',[]);

myApp.controller('GetBill', ['$scope', '$http', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').success(function(data) {
        $scope.bill = data;
        // console.log('INITTED');
    });
}]);

... and that should do it!

answered Jun 28 '15 at 13:30

ccjmne

9,333
3
47
62

Thanks. I've changed my .js file to look like what you linked, creating a angular module called 'billApp' with a controller 'GetBill'. Unfortuantely I'm now getting [thiserror](https://docs.angularjs.org/error/$injector/nomod?p0=billApp) - I can't see why, as in my index.jsp I've got this set: `` and this is definitely the name of my app (`var myApp = angular.module('billApp', []);`). Any suggestions? Thanks for your time btw! – Sphyxxy Jun 28 '15 at 13:59
Hmmm... that seems all right. Did you step in your browser's debugger and made sure your *js* file is actually being loaded? If so, well I'm afraid I can't be of any help, I can't see where the problem is. Ideally, if you could provide us with a **Plunker** link that reproduces your configuration and your problem, we would most likely be able to find the solution quite rapidly :) – ccjmne Jun 28 '15 at 14:11
Managed to sort it - had some issues finding the .js file, I'd misplaced the maven resources. Works beautifully now, thank you! – Sphyxxy Jun 28 '15 at 16:00
Great! Glad you got started with AngularJS, that's a great tool IMO. Please don't hesitate to [accept an answer](http://meta.stackexchange.com/a/5235) if your problem has been solved :) – ccjmne Jun 28 '15 at 16:03

score 0 · Answer 3 · answered Jun 28 '15 at 13:40

After creating the controller as suggested by the other guys here, depending on your data, you will probably need an ng-repeat in your view. If, for example, the data returned by getBill is an array of objects; after assigning the data to $scope.bill (which you did already) you would have to go into the view and change it to this:

  <div ng-controller="GetBill">
     <div ng-repeat="b in bill">
      <p>The ID is {{b.id}}</p>        
      <p>The content is {{b.content}}</p>        
    </div>
 </div>

But if you are not getting an array, you don't have to worry about it.

AngularJS not working - can't pick up variables

3 Answers3