Error: Controller not found when angular.module is called from different files

As I am restructuring my code to make it more modular, I decided to move the controller into a separate file that belongs to the same module. However, I am facing an issue where the controller does not load, even though I have verified that the load order is correct.

// app.js
angular.module("app", []);

// LoginCtrl.js
angular.module("app", []).controller("LoginCtrl", function() 
{
  //doSomeThing
});

I noticed that if I declare a variable 'app' in the first file using angular.module and then use the same variable in other files, everything works as expected.

// app.js
var app = angular.module("app", []);

// LoginCtrl.js
app.controller("LoginCtrl", function() 
{
  //doSomeThing
});

Another observation I made is that when I consolidate all the code into one file and use angular.module separately for each component, it functions properly.

// app.js
angular.module("app", []);

angular.module("app", []).controller("LoginCtrl", function() 
{
  //doSomeThing
});

Could there be something that I am overlooking?

Answer №1

If you want to create a module using AngularJS, you can use the following syntax:
angular.module('myApp', []);

To retrieve an existing module in AngularJS, you simply need to call the same function with just the module name:
angular.module('myApp');

It's important to note that when retrieving a module in a separate file, you should not include the empty array as the second argument in the module function.

Answer №2

Each controller can contain only a single module, as demonstrated in the following code snippet: let app = angular.module('myApp', []) .controller('Controllername', function() {};

Answer №3

Once you have modularized your code, include the following in your LoginCtrl.js file:

var app = angular.module("app");
app.controller("LoginCtrl", function() {
...

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

Terminal displaying 'command not found' message frequently across multiple lines

Struggling to get AngularJS up and running on my system. Unfortunately, I can't seem to move past the installation stage using Terminal. Here's the command I type into the terminal: npm install -g @angular/cli But all I get in return is: - ba ...

Is it possible to utilize the output of a function nested within a method in a different method?

I am currently facing a challenge with my constructor function. It is supposed to return several methods, but I'm having trouble using the value from this section of code: var info = JSON.parse(xhr.responseText); Specifically, I can't figure ou ...

Instructions for incorporating a personalized document in NextJs version 13

In order to enhance the design of my upcoming Next.js 13 project, I am looking to integrate a custom design system package. This particular package necessitates the creation of custom documents within the page directory, as outlined in the official Next. ...

Creating dynamic web pages with jQuery is a simple and effective

I am currently using jQuery to create HTML elements with specific classes and then append them together. However, the code I have written is not adding the generated HTML to the container as expected. There are no errors being produced but the HTML is not ...

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/ In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of the ...

Tips for toggling a menu by clicking a link

I have a Navbar component with a hamburger menu. When the hamburger menu is clicked, I want to display the menu component, which is separate. To achieve this, I passed data through props and made it work. Now, I want the menu to close when clicking outsi ...

Extension ConfirmButtonExtender

There is a scenario where I need to skip the ConfirmButtonExtender based on the value of another field in the page. Typically, when a user clicks on my "Cancel" button, a modal popup appears using the confirmbuttonextender and the modalpopupextender. The ...

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

Using the PUT method in Node.js to set the ID

Need help with setting ID value from frontend apiRoutes.put('/intake', function(req, res) { Intake.findById({id, function(err, intake) { if (err) res.send(err); check : true; intake.save(function(err) { ...

trouble with maintaining nodejs mariadb connection

Hello, I am working with nodejs to create a rest API However, I have encountered an issue Let's take a look at the code var http = require('http'); var url = require('url'); var mariadb = require('mariadb'); http.c ...

React Table Pagination Bug with Material UI Library

I am currently using Material UI and referencing the table sample provided at https://material-ui.com/demos/tables/. However, when attempting to implement the Custom Table Pagination Action according to the sample, I encountered an error. The error "inher ...

End node.js once and for all

After starting my server using forever start start.js It ran normally. However, when I attempted to stop it with forever stopall The server was removed from forever list as expected Nevertheless, upon running lsof -i tcp:3000, my server still showed u ...

Manipulating events through adjusting values of a JQuery-UI range-slider

My range-slider's values are being set with the code: $('...').slider( 'values', [ 0, 10000 ] );. However, I am facing an issue where this line triggers the change( event, ui ) event twice. Is there a way to ensure it only triggers ...

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

Encountering an issue in React: unable to establish properties for null

There are two elements that should appear based on whether a condition is true or false. However, I am encountering an issue when trying to use the useRef hook for one of them. Despite the fact that the element sometimes renders first, I keep receiving t ...

React MUI: Dynamic and Adaptive sidebar

I'm currently working on integrating React Material UI: Persistent + Responsive drawer to create a responsive layout for mobile devices with a persistent drawer for larger screens. I've come across some code that almost fits my requirements, but ...

The .keypress() function isn't behaving as expected

I've encountered a coding dilemma. Below is the code in question: $(document).ready(function () { var selectedDay = '#selected_day'; $(function () { $("#date").datepicker({ dateFormat: "DD, d M yy", a ...

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

Can JavaScript be used to identify if the current browser is the default one being used?

It would be incredibly helpful for my application to determine if the current browser is set as the default browser. Is it feasible, utilizing JavaScript, to ascertain whether the browser in which my page is open is the default browser (i.e. the browser t ...

When a specific option is selected in a `select` element with the `multiple` attribute, activate the change event

Is it possible to trigger a change event on individual options within a standard select element using jQuery or another method? I want the change event to be triggered on the option elements themselves rather than on the select element, as multiple options ...