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
– Ramesh Rajendran, Commented May 23, 2017 at 12:02
Read this answer, which will help you to understand why your code wasn't working. — Pankaj Parkar
– Pankaj Parkar, Commented May 23, 2017 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
– Usman Javaid, Commented May 23, 2017 at 12:20

Sajeetharan · Accepted Answer · 2017-05-23 12:01:17Z

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 (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?

Mistalis · Accepted Answer · 2017-05-23 12:03:46Z

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>

Collectives™ on Stack Overflow

Controller creation issue in Angular

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related