Setting up a bare bone angular 1 app

Question

I'm trying to set up a small application to learn how to set up an angular 1 project (yes, 1. We are on 1 at the office and I want to learn it).

Part of it works, but when I add another controller, it falls apart. My project looks like this:

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 (abbreviated):

 <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>

My clocks are shown as well as the 'Name' property on the scope.

But, now I try to add an extra controller:

tickerController.js

angular.module('app.controllers').controller('tickerController', 
    function($scope) {
        'use strict';

        $scope.Name = 'ticker'; });

I also add a link to it in the <head>:

<script src="js/app.js"></script>
<script src="js/clockController.js"></script>
<script src="js/tickerController.js"></script>

And of course an extra div in the index.html

  <div ng-controller="tickerController" >

        {{ $scope.Name }}

    </div>

    <div ng-controller="clockController"........

But now I get slapped around with the following error:

angular.js:14700 Error: [$controller:ctrlreg] The controller with the name 'clockController' is not registered.

And my page stays mostly blank.

How to proceed now?

yeah, as i said, the clock works. It breaks down when I add the extra controller — Learner, Dec 27 '17 at 16:26
Are you sure you only have one instance of `angular.module('app.controllers', [])` that has second argument of dependency injections? If you use that twice it will overwrite any previous one and anything that was registered using it — charlietfl, Dec 27 '17 at 16:44
@Sajeetharan I think this is a good break down of the issue https://plnkr.co/edit/b6Mvj0stzQSGYhtBtxyn h — Learner, Dec 27 '17 at 17:08
@Learner i made few changes, is this what you need https://plnkr.co/edit/7UeMG97XcIOMgzfGLmur?p=preview — Sajeetharan, Dec 27 '17 at 17:11

score 1 · Accepted Answer · edited Dec 27 '17 at 17:57

1

Looks like you are trying it incorrectly. Create one more module, register the controller with the module and include it as part of the module. That should work. Other Solution:

angular.module('app.controllers', [app.clockController])
.controller('clockController', function($scope) {
    "use strict";

    $scope.Name = "Angular";
});

This should work also.

edited Dec 27 '17 at 17:57

dferenc

7,918
12
41
49

answered Dec 27 '17 at 17:06

user3396615

36
1

Setting up a bare bone angular 1 app

1 Answers1