angularjsangularjs-controllerangularjs-module

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

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){
});
Solution

  • 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:1

    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