Controller creation issue in Angular

Question

I am learning AngularJS and stuck with a problem from sometime. I am trying to display a list of Name/City saved inside a controller but it is not being displayed in my browser. Earlier, I was doing it directly (without controller using data-ng-init) and it was visible. Can anybody help?

<html data-ng-app="">
   <head>
      <title> Using AngularJS and etc</title>
   </head>
   <body data-ng-controller="SimpleController">
      Name:
      <br/>
      <input type="text" data-ng-model="name" /> 
      <br/>
      <ul>
         <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city | uppercase }}</li>
      </ul>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script>
         function SimpleController($scope) {

         $scope.customers = [
                {name: 'Dave', city: 'London'},
                {name: 'Naww', city: 'Tokyo'},
                {name: 'Jim Do', city: 'ABX'},
                {name: 'Ben', city: 'Oslo'}
            ];

            }
      </script> 
   </body>
</html>

You should define `ng-app="someApp"` and also configure it on `angular.module("someAPP",[]).controller()....` — Ramesh Rajendran, May 23 '17 at 12:02
Read [this answer](https://stackoverflow.com/a/28728380/2435473), which will help you to understand why your code wasn't working. — Pankaj Parkar, May 23 '17 at 12:09
Thank you Pankaj. So I was following a tutorial and unfortunately the method in the tutorial is not functional after 1.3 release. Thanks. — Usman Javaid, May 23 '17 at 12:20

score 3 · Answer 1 · answered May 23 '17 at 12:01

you need ng-app and use controller declaration like below , the way you declared won't work with angular version above 1.3

DEMO

<html ng-app="myApp">
   <head>
      <title> Using AngularJS and etc</title>
   </head>
   <body ng-controller="SimpleController">
      Name:
      <br/>
      <input type="text" ng-model="name" /> 
      <br/>
      <ul>
         <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city | uppercase }}</li>
      </ul>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script>
        var app = angular.module('myApp',[]);
        app.controller('SimpleController',function($scope){
         $scope.customers = [
                {name: 'Dave', city: 'London'},
                {name: 'Naww', city: 'Tokyo'},
                {name: 'Jim Do', city: 'ABX'},
                {name: 'Ben', city: 'Oslo'}
            ];

            });
      </script> 
   </body>
</html>

Thank you. Yes, this method is working. Actually, I was following an online tutorial (https://www.youtube.com/watch?v=i9MHigUZKEM) and in it the tutor created the function like I did. Can you have a look at the video (jump to 30:00 duration) and confirm if he is doing it the wrong way? — Usman Javaid, May 23 '17 at 12:17

score 2 · Answer 2 · answered May 23 '17 at 12:03

A controller should be defined in a module. You didn't defined any module in your app, so your controller is not created (you probably have an error in your console saying this).

Here is a way to solve your issue:

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

myApp.controller('SimpleController', function($scope) {
   $scope.customers = [
      {name: 'Dave', city: 'London'},
      {name: 'Naww', city: 'Tokyo'},
      {name: 'Jim Do', city: 'ABX'},
      {name: 'Ben', city: 'Oslo'}
   ];
});

   <html data-ng-app="myApp">
   <head>
      <title> Using AngularJS and etc</title>
   </head>
   <body data-ng-controller="SimpleController">
      Search by name:
      <br/>
      <input type="text" data-ng-model="name" /> 
      <br/>
      <ul>
         <li data-ng-repeat="cust in customers | filter: name"> {{ cust.name }} - {{ cust.city | uppercase }}</li>
      </ul>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </body>
</html>

Controller creation issue in Angular

2 Answers2