Search code examples
javascripthtmlangularjsngroute

Controller doesn't seem to be registered


I'm attempting to get ngRoute to work for the first time by myself.

However I'm hitting a Error: [$controller:ctrlreg] when attempting to register my controller.

My index.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="resources/css/bootstrap.min.css" />
    <link rel="stylesheet" href="resources/css/font-awesome.min.css" />
    <link href="resources/css/header.css" rel="stylesheet" />
    <link href="resources/css/index.css" rel="stylesheet" />
</head>
<body>
    <div id="main-div" class="flex">
        <div class="flex header">
            <img id="header-img-left" src="resources/img/WSC.png" />
            <img id="header-img-right" src="resources/img/StobartRail.png" />
        </div>
        <!-- body -->
        <div ng-app="kioskApp" id="questions-div">
            <div ng-view></div ng-view>
        </div>
    </div>
    <script src="resources/js/angular.min.js"></script>
    <script src="resources/js/angular-route.min.js"></script>
    <script src="resources/js/jquery-3.2.1.min.js"></script>
    <script src="resources/js/bootstrap.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/components/homeController.js"></script>
</body>
</html>

As you can see it references two .js files, one being the module and the second being the homeController.

The module simply sets up the routes:

(function () {
    angular.module('kioskApp', ['ngRoute'])
        .config(function ($routeProvider) {

            $routeProvider.when("/", {
                controller: "../../app/components/homeController",
                controllerAs: "vm",
                templateUrl: "../../app/home/home.html"
            });

            $routeProvider.when("/login", {
                controller: "../../app/components/loginController",
                controllerAs: "vm",
                templateUrl: "../../app/home/login.html"
            });

            $routeProvider.otherwise({ redirectTo: "/" });
        });

})();

My .html gets picked up fine as I can see various elements on that file in my ng-view. But for some reason my controller doesn't seem to be registered...

I can't find any problems with the homeController:

(function () {

    "use strict";

    angular.module('kioskApp')
        .controller('homeController', homeController);

    function homeController() {
        let vm = this;

        vm.placeholder = [{ id: 10 }, { id: 11 }];

    };
})();

Solution

  • when binding controllers to routes, there is no need for the file path. refer the below example:

            $routeProvider.when("/", {
                controller: "homeController",
                controllerAs: "vm",
                templateUrl: "../../app/home/home.html"
            });
    
            $routeProvider.when("/login", {
                controller: "loginController",
                controllerAs: "vm",
                templateUrl: "../../app/home/login.html"
            });