AngularJS - 'DashboardController' Not Registered

Question

I have a new angular app and I can't figure out why my controller is not registering. The full error I get is:

The controller with the name 'DashboardController' is not registered.

I have the app module and dashboard controller in two separate files:

app.js:

var HtJobPortal = (function () {
    'use strict';

    angular.module('HtJobPortal', []);
})();

DashboardController:

(function () {
    'use strict';

    HtJobPortal.controller('DashboardController', []);

    var vm = this;
    vm.title = 'DashboardController';

})();

And my HTML is just attempting to extract the title:

<body ng-controller="DashboardController">
    {{title}}


    <!-- JS Scripts -->
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.js"></script>

    <!-- Application Directive -->
    <script src="Scripts/controllers/app.js"></script>

    <!-- Controllers -->
    <script src="Scripts/controllers/DashboardController.js"></script>

</body>

Can anybody help point out what I'm missing here?

Sachila Ranawaka · Accepted Answer · 2017-05-04 16:19:09Z

1

you don't need to add the IIFE function assign to a variable just remove it. The whole point of using IIFe is to reduce the time of the variable life. making a global variable just make the lifetime much longer

(function () {
    'use strict';

    angular.module('HtJobPortal', []);
})();

in the controller, file add the module reference to the controller and create a function to that controller

(function () {
    'use strict';
 angular.module('HtJobPortal')
    .controller('DashboardController',DashboardController);

    DashboardController.$inject = ['$scope'];

    function DashboardController($scope){      
       var vm = this;
       vm.title = 'DashboardController';
    }

})();

In the html add the ng-app directive also. since you are using the controlleras , use the correct syntaxes.

<body ng-app="HtJobPortal" ng-controller="DashboardController as vm">
    {{vm.title}}


    <!-- JS Scripts -->
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.js"></script>

    <!-- Application Directive -->
    <script src="Scripts/controllers/app.js"></script>

    <!-- Controllers -->
    <script src="Scripts/controllers/DashboardController.js"></script>

</body>

edited May 4, 2017 at 16:19

answered May 4, 2017 at 16:14

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Web Develop Wolf Over a year ago

Stops the errors but doesn't output the title - just a blank screen

Sachila Ranawaka Over a year ago

@Web Develop Wolf no problem bro :D

Collectives™ on Stack Overflow

AngularJS - 'DashboardController' Not Registered

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related