Angular controller with specific name is not registered

Question

I'm trying new field in AngularJS 1,

I've tried to follow video tutorial "AngularJS Fundamentals In 60-ish Minutes" by Dan Wahlin everything is good but I don't know where issue come, when I inspect my console in Chrome, notification error show if "The controller with the name 'SimpleController' is not registered"

here my code:

<html ng-app="testAppApp">
<head>
...........
...........
</head>
<body>
<div ng-controller="SimpleController">
Search <input type="text" ng-model="name" />

<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'Name'">   
{{cust.Name}} - {{cust.City}} - {{cust.Age}}</li>
</ul> 

</div> 
<script src="bower_components/angular/angular.js"></script>

Here my controller below the angular script

<script>
var testAppApp = angular.module('testAppApp', []);

testAppApp.controller('SimpleController', function ($scope) {
        $scope.customers = [ 
                {Name: 'Tatiana', City: 'Troy Village', Age: '23'},
                {Name: 'Drew', City: 'Enor City', Age: '28'},
                {Name: 'Barry', City: 'Ville', Age: '27'}
                ];
        });
</script>
</body>
</html>

I using latest angularJS 1.x (1.6.2), and feel I've followed the tutorial with correct. But I don't know why my script error.

Dushyantha · Accepted Answer · 2017-03-14 12:21:35Z

1

Set your controller path like ;

<script src="js/controller/SimpleController.js" type="text/javascript"></script>

answered Mar 14, 2017 at 12:21

Dushyantha

2172 silver badges15 bronze badges

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

1 Comment

agnanzakariya Over a year ago

it seem your answer is my solution, but it's strange a little bit honestly. Why I must set my controller to path, you know the reason? I using yeoman generator btw.

Saurabh Agrawal · Accepted Answer · 2020-01-15 14:19:20Z

1

This is because your are using angular before loading. Load angular.min.js in head section

Try this

<!DOCTYPE html>
<html ng-app="testAppApp">
<head>
<title></title>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
    var testAppApp = angular.module('testAppApp', []);
    testAppApp.controller('SimpleController', function ($scope) {
        $scope.customers = [
            { Name: 'Tatiana', City: 'Troy Village', Age: '23' },
            { Name: 'Drew', City: 'Enor City', Age: '28' },
            { Name: 'Barry', City: 'Ville', Age: '27' }
        ];
    });
</script>
</head>
<body>
<div ng-controller="SimpleController">
    Search <input type="text" ng-model="name" />

    <ul>
        <li ng-repeat="cust in customers | filter:name | orderBy:'Name'">
            {{cust.Name}} - {{cust.City}} - {{cust.Age}}</li>
    </ul>

</div>

</body>

</html>

edited Jan 15, 2020 at 14:19

answered Mar 14, 2017 at 12:22

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

1 Comment

agnanzakariya Over a year ago

I using yeoman to generate my project, so I follow the rule where the yeoman put my script. I've tried your solution but it still not work, when I put my controller into src path, strangely it work properly.

Jayant Patil · Accepted Answer · 2017-03-14 12:21:46Z

0

Your code is correct here is the Jsfiddle link using angualr 1.4.8

HTML

  <div ng-app='testAppApp'>

  <div ng-controller="SimpleController">
    Search
    <input type="text" ng-model="name" />

    <ul>
      <li ng-repeat="cust in customers | filter:name | orderBy:'Name'">
        {{cust.Name}} - {{cust.City}} - {{cust.Age}}</li>
    </ul>

  </div>
  </div>

Js

  var testAppApp = angular.module('testAppApp', []);
  testAppApp.controller('SimpleController', function ($scope) {
          $scope.customers = [ 
                  {Name: 'Tatiana', City: 'Troy Village', Age: '23'},
                  {Name: 'Drew', City: 'Enor City', Age: '28'},
                  {Name: 'Barry', City: 'Ville', Age: '27'}
                  ];
          });

Hope this will help you

answered Mar 14, 2017 at 12:21

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

1 Comment

agnanzakariya Over a year ago

I've set my script into path, and it's work properly, so this is not my latest angular have issue(s), but thanks for your help.

Faraz Babakhel · Accepted Answer · 2017-03-14 12:29:19Z

0

Add the following code in head section and make sure your internet is working properly.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

OR include your angular.js with complete path Like

<script src="Content/js/bower_components/angular/angular.js"></script>

edited Mar 14, 2017 at 12:29

answered Mar 14, 2017 at 12:24

Faraz Babakhel

6645 silver badges17 bronze badges

2 Comments

Faraz Babakhel Over a year ago

agnanzakariya this may help you. Best of luck

Faraz Babakhel Over a year ago

@agnanzakariya please mark "this answer is helpful" if this work for you. Thanks

Collectives™ on Stack Overflow

Angular controller with specific name is not registered

4 Answers 4

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related