Error Encountered: AngularJS - 'DashboardController' is Not Registered

I just set up a new angular app and I'm encountering an issue where my controller is not registering. The error message I am receiving states:

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

My app module and dashboard controller are in separate files, as shown below:

app.js:

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

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

DashboardController:

(function () {
    'use strict';

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

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

})();

In my HTML file, I am trying to display 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>

Any suggestions on what might be missing or causing this issue would be greatly appreciated.

Answer №1

To improve your code, you can remove the IIFE function assignment to a variable. The purpose of using an IIFE is to reduce the lifespan of variables, so creating a global variable would defeat that purpose.

(function () {
    'use strict';

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

In your controller file, make sure to reference the module and create a function for that controller.

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

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

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

})();

Also, remember to add the ng-app directive in your HTML and use the correct syntax when using controlleras.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining two objects retrieved using ngResource in AngularJS

Seeking guidance on merging two objects retrieved using ngressource. Every 5 seconds, I invoke my service to fetch a message and aim to append the new message with the older ones. The JSON message I receive: [ {"age": 0,"id": "my first tweet","name": "H ...

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

Updating the style of a div in ReactJS with instant changes

Currently working on a project where I need to create a self-centering, self-sizing content editable div. The text is centered and the width is already set to 100% of the parent container; my main concern now is the height. I have implemented a function t ...

Managing ajax requests, failing to retrieve information

I am struggling to configure my client-side ajax calls to send data to a node express server. I want the ajax request to be triggered "onclick" of an href link. My goal is to pass the ID of the link as a variable to the server, but unfortunately, the serv ...

POST request returned a null response in the xhr.responseText

Check out the structure of my JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://myajaxurl.com/lyric", true); var data = "lyric"; xhr.onreadystatechange = function() { if (xhr.readyState == 4) { console.log(xhr.responseText); ...

Dynamic count down using JavaScript or jQuery

I am looking for a way to create a countdown timer that I can adjust the time interval for in my database. Basically, I have a timestamp in my database table that might change, and I want to check it every 30 seconds and update my countdown accordingly. H ...

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

I have a unique project in mind that involves creating an HTML5 canvas cylinder with the camera view at its center. The walls of the cylinder will display images, and the entire structure should be able to rotate and zoom. If anyone has any advice on how ...

Customizing the Header Navigation in Vue App.vue Across Various Views

Struggling to find the best approach for managing a header navigation in Vue 2 using Vuex with VueRouter. The main issue is creating a dynamic 'header' type navigation in App.vue. <div id="nav"> <!--Trying to create a dynamic ...

What is the best way to change an HTML class using PHP?

I'm currently facing a challenge with my "Newsletter Subscription Form". I rely on MailChimp for sending out newsletters and have successfully set up a custom PHP file to redirect visitors after they enter their email. Here's the step-by-step pr ...

An object-c alternative to encodeURIComponent

Having difficulty finding information on this through a search engine. Is there a similar method in Objective-C for encoding URI components? http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp This is a common task, but I am unable to locate any ...

Trouble with integrating HTML5 canvas from an external JavaScript file

Having trouble with storing canvas js in an external file. If the javascript responsible for drawing on the canvas is included in the html header, then the rectangle is displayed correctly. Here is the working html (javascript in html header): <!DOCT ...

A guide to transferring modules between component files in JavaScript

My query pertains to the handling of imports in web pages. When a file is imported into another, do the declarations and imports from the imported file become available in the file where it is being imported? A suggestion was made for me to import a compo ...

Link the global to the Vue component

Is there a way to connect global filters, mixins, and additional features to a specific Vue Instance rather than the Vue object directly? For instance import Vue from 'vue.js' import App from './app' import demo from './mixins/dem ...

Turn off the incorrect TypeScript error detection

After setting up 'interact.js' using jspm and npm for TypeScript compatibility, I am encountering errors in my code: import { interact } from 'interact.js/interact' // ==> typescript error: TS2307: Cannot find module 'interact. ...

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

What causes Vue to drop nested component data within a v-for loop?

Witness the mysterious behavior through my fiddles: Anticipated outcome: https://jsfiddle.net/o7c9mwzf/27/ By clicking "unshift," I add an element to the beginning of my items array. After setting its data, clicking "unshift" again should maintain the el ...

howler.js resumes playing sprite sound after being paused

I have been working on setting up an audio sprite using Howler.js. The basic functionality of the sprite is working well, but I am facing an issue when trying to resume playback after pausing a sprite. When I call play(), it does not work as expected. sou ...

Ways to link a Javascript or Jquery function to an HTML form

I am looking to develop a form that can extract email addresses from input text. While I know there are many scripts available that can do this quite easily, my goal is to create one on my own. After reading, researching, and experimenting with differ ...

AngularJs expression can be quite annoying to deal with at times

After writing an AngularJS expression in Razor for the HTML helper, I noticed that upon refreshing the page after loading once, the expression is displayed which can be quite irritating. What could be causing this issue? Here is the code: @Html.EditorFo ...