Controller is not registered error after adding ngRoute `.config`

Question

Controller is not registered error after adding ngRoute `.config`

75 Views Asked by Thomas At 11 November 2019 at 19:52

Controller is not recognizing - AngularJS error

I've a controller defined in controllerPloyee.js called controllerPloyee which was working before i added the ngRoute and made to route. The error that shows is

angular.min.js:127 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=controllerPloyee

I've checked the documentation and another questions with the same error, but doesn't help.

Index.html

<html ng-app="ployee">
<head>
    <!--Angular-->
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.js"></script>
    <!--JS-->
    <script src="assets/js/moduloPloyee.js"></script>
    <!--Controllers-->
    <script src="assets/js/controllers/controllerPloyee.js"></script>
    <!--Services-->
    <script src="services/routeConfig.js"></script>
</head>
<body>
    <div ng-view></div>
    <div ng-include="'view/footer.html'"></div>
</body>
</html>

routeConfig.js

angular.module('ployee', ['ngRoute']).config(function($routeProvider){
    $routeProvider.when('/login', {
        templateUrl: "view/login.html",
        controller: "controllerPloyee"
    }).when('/',{
        templateUrl: "view/login.html",
        controller: "controllerPloyee"
    }).otherwise({redirectTo: "/login"})
})

controllerPloyee.js

angular.module('ployee').controller('controllerPloyee',  function($scope){
});

Original Q&A

There are 1 best solutions below

**georgeawg** · Accepted Answer · 2019-11-11T20:06:51.787000

The script that creates the module needs to be placed before the others:

<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!-- IMPORTANT needs to be place here -->
<script src="services/routeConfig.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
̶<̶s̶c̶r̶i̶p̶t̶ ̶s̶r̶c̶=̶"̶s̶e̶r̶v̶i̶c̶e̶s̶/̶r̶o̶u̶t̶e̶C̶o̶n̶f̶i̶g̶.̶j̶s̶"̶>̶<̶/̶s̶c̶r̶i̶p̶t̶>̶

The statement angular.module('ployee', ['ngRoute']) creates a new module. The statement angular.module('ployee') retrieves the module for further configuration.

When the module is created after the controller script, the controller is lost. This is why the script that creates the module needs to be placed before other scripts which add controllers, services, filters, directives, constants, etc.

A module is a container for your app.

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module.

From the Docs:¹

Creation versus Retrieval

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

For more information, see

Controller is not registered error after adding ngRoute `.config`

Controller is not recognizing - AngularJS error

There are 1 best solutions below

Creation versus Retrieval

Related Questions in ANGULARJS

Related Questions in ANGULARJS-CONTROLLER

Related Questions in ANGULARJS-MODULE

Trending Questions

Popular # Hahtags

Popular Questions