The controller with the name 'mainController' is not registered

i have this code in my script.js file

var mainController = function($scope){
  $scope.message = "Plunker";
};

and this is my HTML

<!DOCTYPE html>
<html ng-app>
    <head>
        <script data-require="[email protected]" data-semver="1.6.1"    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body ng-controller="mainController">
        <h1>Hello {{ message }}</h1>
    </body>
</html>

i declared ng-app in the opening html tag

but i get this error on my console that mainController is not registered

Answers:

Answer

To paraphrase http://www.w3schools.com/angular/angular_modules.asp

 <div ng-app="myApp" ng-controller="mainController">
{{ firstName + " " + lastName }}
</div>

<script>

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

app.controller("mainController", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script> 

The important line is

    app.controller("mainController", function($scope) 

which injects your controller into your app

Answer

The code is following an obsolete example.

Migrating from 1.2 to 1.3

Controllers Due to 3f2232b5, $controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.

To migrate, register your controllers with modules rather than exposing them as globals:

Before:

function MyController() {
  // ...
}

After:

angular.module('myApp', []).controller('MyController', [function() {
  // ...
}]);

-- AngularJS Developer Guide -- Migrating from 1.2 to 1.3

Answer

You need to register your controller with as like this in your script.js file

var app = angular.module('myApp', []);
 app.controller('mainController', function($scope) {
  $scope.message= "msg";

   });
Answer

You need to register your controller with the main module of your application.

Try this in your app.js

 var myApp = angular.module('app', []);
 myApp.controller('mainController', function($scope){
    $scope.message = "Plunker";     
 });

and in your html

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <script data-require="[email protected]" data-semver="1.6.1"    src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body ng-controller="mainController">
        <h1>Hello {{ message }}</h1>
    </body>
</html>
Answer

In case you have your code correct and still getting this error then look in the Console (JS Console) in the browser using inspect window for another JS error shown. Most propably that error will be before this error.

If you solve that JS error then this will get resolved automatically if your code is right. In my case I started getting this error out of the sudden and tried to solve it but nothing work and then I try something else for sometime and saw another error above this error and tried solving it. That was a easy thing to solve and once done this error also got solved by itself.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.