Can't retrieve data from controller AngularJS

Question

I am learning AngularJS (so I'm a noob to this) I'm following a tutorial on Udemy. I even looked at the docs and have tried the wiring they have presented. I just can't seem to get the customers data in the table. What am I doing wrong and an explanation would be appreciated so I can learn the right way of AngularJS for the interview? Any help is much appreciated. By the way I'm using the latest version of AngularJS 1.7

(function () {
  var CustomersController = function($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;

    $scope.customers = [{name:'sanjeet', joined:'2000-12-02', orderTotal: 10.096, age: 26}, {name:'gurpreet', orderTotal:201.961, joined:'2005-12-07',age: 24}, {name:'nikki', orderTotal: 14.561, joined:'2001-11-02', age: 25}];

    $scope.doSort = function(propName) {
      $scope.sortBy = propName;
      $scope.reverse = !scope.reverse;
    };
  };
  angular.module('app').contoller('CustomersController', CustomersController)
}())

// app.controller('CustomersController', ['$scope', function($scope) {
//   $scope.sortBy = 'name';
//   $scope.reverse = false;
//
//   $scope.customers = [{name:'sanjeet', joined:'2000-12-02', orderTotal: 10.096, age: 26}, {name:'gurpreet', orderTotal:201.961, joined:'2005-12-07',age: 24}, {name:'nikki', orderTotal: 14.561, joined:'2001-11-02', age: 25}];
//
//   $scope.doSort = function(propName) {
//     $scope.sortBy = propName;
//     $scope.reverse = !scope.reverse;
//   };
// }])

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>My first AngularJS project</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h3>Customers</h3>
    Filter: <input type="text" ng-model="customerFilter.name"/>
    <br />
        <table ng-controller="CustomersController">
          <tr>
            <th ng-click="doSort('name')">
              Name
            </th>
            <th ng-click="doSort('age')">
              Age
            </th>
            <th ng-click="doSort('joined')">
              Joined
            </th>
            <th ng-click="doSort('orderTotal')">
               Order Total
            </th>
          </tr>
          <tr ng-repeat="customer in customers | filter: customerFilter | orderBy:sortBy:reverse" >
            <td>
              {{customer.name}}
            </td>
            <td>
              {{customer.age}}
            </td>
            <td>
              {{customer.joined | date: 'yyyy-MM-dd'}}  <!--medium, longDate -->
            </td>
            <td>
              {{customer.orderTotal | currency: 'y'}}
            </td>
          </tr>
        </table>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="app/controllers/customersController.js"></script>
    <script> var app = angular.module('app', [])</script>
  </body>
</html>

Claies · Accepted Answer · 2018-07-10 23:50:19Z

1

You have multiple issues causing your app to not load. You should consider using angular.js rather than angular.min.js to receive better error messages in the console, which would help you to identify your errors.

You have a typo in your controller code. angular.module('app').contoller('CustomersController', CustomersController). .controller is missing an r.
You cannot use <html ng-app> in newer releases of angular (1.3+). This is a very old syntax. The correct syntax is to identify the app module. <html ng-app="app">.
Your App module must be defined before the controllers that use it. i.e.

<script> var app = angular.module('app', [])</script>

has to come before

<script src="app/controllers/customersController.js"></script>
Your Filter: <input type="text" ng-model="customerFilter.name"/> line is outside the controller, and thus won't function. You should move the ng-controller="CustomersController" to the body instead of the table, or a wrapping div.

I created a plunker and updated your code, showing the app in a functional status.

answered Jul 10, 2018 at 23:50

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanjeet Uppal Over a year ago

Thank you so much I should have caught the scripts and the typo!

Collectives™ on Stack Overflow

Can't retrieve data from controller AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related