Currently, I am in the process of setting up a small application with Angular 1 to enhance my skills (yes, we are still using version 1 at my workplace and I want to familiarize myself with it).
Most of the application is working fine, but as soon as I introduce another controller, everything seems to fall apart. This is how my project is structured:
app.js:
angular.module('app', [
'app.controllers',
'ds.clock'
]);
clockController.js:
angular.module('app.controllers', []).controller('clockController',
function($scope) {
"use strict";
$scope.Name = "Angular";
});
index.html (shortened):
<body ng-app="app">
<div ng-controller="clockController" style="float:right;width:20%x;margin:auto">
{{Name}}
<div>
<div><ds-widget-clock show-analog></ds-widget-clock></div>
</div>
The clocks are displaying correctly along with the 'Name' property on the scope.
However, when I try to include an additional controller:
tickerController.js
angular.module('app.controllers').controller('tickerController',
function($scope) {
'use strict';
$scope.Name = 'ticker'; });
I have also linked it in the <head>:
<script src="js/app.js"></script>
<script src="js/clockController.js"></script>
<script src="js/tickerController.js"></script>
Additionally, I added a new div in the index.html
<div ng-controller="tickerController" >
{{ $scope.Name }}
</div>
<div ng-controller="clockController"........
Upon doing this, I encountered the following error:
angular.js:14700 Error: [$controller:ctrlreg] The controller with the name 'clockController' is not registered.
As a result, most of my page remains blank.
Any suggestions on how to proceed from here?