Mindsect Team Mindsect Team - 4 months ago 9
AngularJS Question

Simple AngularJS Controller Demo Not Working

I have been using AngularJS for some time now and this particular code block is not difficult by any means, but it's not working and there must be something extremely simple that I am missing here:

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
<script src="angular.min.js"></script>
</body>
</html>


As of now, this code produces a blank page. There should be an unordered list with four records and for example, typing 'Bob' in the input box should filter the records down to the only one that contains the name 'Bob'.

This demo was already working when the AngularJS code was inline and there was no controller. I had used ngInit in order to supply the customer array. When I attempted to place the customers in their own controller, I started receive a blank page.

I'm sure I just need a second pair of eyes to look over this very simple example.

Thanks for any help you may be able to provide.

Answer

<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      angular.module('app', []).controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

Multiple things you could change in the demo.

  1. You should create a new angular module

    var module = angular.module(name, [dependencies])

  2. That module should be bootstrapped using ng-app

    ng-app="nameOfApp"

  3. Controller should be added to the defined module

    module.controller('SimpleController', SimpleController);

EDIT: Same outcome without specifying a module

<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

Comments