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 }];
};
})();
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"
});