The controller is unable to recognize the injected service

var login_app = angular.module('login_app',[]);


login_app.factory('login_service', function($http) {
   return {
        loginUser: function() {
             //return the promise directly.
             return $http.get('/service/login')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});  

login_app.controller('login_controller',
                    ['$scope','login_service'
                     function($scope, login_service){

                      $scope.login_username = "";
                      $scope.login_password = "";
                      $scope.remember_login = false;
                      $scope.login_button_action = function(){
                                                     login_service.loginUser();
                                                 }

                    }]);

I have a login form integrated with this controller and everything seems to be functioning properly. Whenever I click on the login button, it triggers the login_button_action through ng-click directive.

I'm encountering an issue where my JavaScript console keeps showing this error message.

ReferenceError: login_service is not defined

Do you see any issues with how my controller is utilizing the service?

Answer №1

Make sure to include the login_service in your definitions like this:

login_app.controller('login_controller', ['$scope','login_service',
    function($scope,login_service){
        // Implement your code that utilizes the service here.
}]);

Additionally, don't forget to link the service script file in your document.

If you're not concerned about minification or similar issues, then you can simply do:

login_app.controller('login_controller', function($scope, login_service){
      // Implement your code that utilizes the service here.
 }]);

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

Dnd-kit: item loses its place in line when dragged over Droppable area

I've encountered an issue while using @dnd-kit. The sorting function works smoothly (e.g. when I drag the 1st element, it sorts correctly), but once I reach a droppable element (green Thrash), the sorting breaks and the 1st element snaps back. You ca ...

Attempting to transform a numerical value into CSS syntax

Currently, I am attempting to loop through several DIV elements, extract a numerical value from each DIV, and then based on that value matching a specific value in the JavaScript code, assign a particular CSS Class back to the original DIV. This is the sn ...

Utilize the dynamic backlash/Werkzeug debugger during an unsuccessful AJAX request on a TurboGears server

TurboGears offers the unique feature of "backlash," an interactive debugger within the browser that is built on the Werkzeug Debugger. When server-side debugging is enabled, in case of a request failure, an interactive web page is displayed where users can ...

Converting a JSON object into an array of objects

I am looking to transform the following JSON structure let data = { item1: [11, 12, 13, 14, 15], item2: [16, 17, 18, 19, 20] } into this specific format using JavaScript's native functionalities of arrays or objects (compatible with all web brow ...

What is the best way to store settings values permanently during the installation process in a react-native application?

I am looking for a way to save the settings of my app only during installation, rather than every time the app is opened, in order to prevent the options from resetting. I have tried searching on YouTube but most tutorials cover only user login persistence ...

Extract the image source from this HTML retrieved using JavaScript

I need to retrieve the source URL of an image from a certain part of a document. Here is my current approach: var theImg = document.getElementById('imageDiv').innerHTML; The above code snippet returns something like this: theImg = <img src ...

Exporting a module with Node.js is a crucial aspect of building

Within my custom module, I have successfully set up an export function. module.exports = function(callback) { var request = require("request") var url = "http://sheetsu.com/apis/94dc0db4" request({ url: url, json: true }, ...

JavaScript, keep it easy: globalize

Looking for help with a simple regex expression... document.getElementById('testing').value=f2.innerHTML.replace(">",">\n"); I'm having an issue where it only stops after the first line break. How can I make it work for the enti ...

AngularJS ng-bind not functioning - Unable to assign value to nonexistent property

I'm completely new to AngularJS and I am facing an issue while trying to set a value for a span using AngularJS ng-bind to validate a name input field. Despite my attempts, I haven't been able to make it work. HTML: <div class="modal fade" i ...

Determining the Next Available Date from JSON Data

I have a task of using a JSON response from the Eventbrite API to showcase the upcoming event tour date. The goal is to automatically calculate this date based on the current time, identifying the next event after the current moment. Below is the JSON res ...

Instead of properly addressing the issue, the error message "Cannot read property 'password' of undefined" is being displayed

I'm currently working on creating a user login system using express js and dynamodb. However, I'm facing an issue where the system works fine when logging in with correct email and password, but fails to handle errors when using an incorrect emai ...

"How to retrieve data from a nested object in MongoDB by referencing variables

I am facing an issue with accessing nested objects using a variable in the npm package mongojs. Despite my efforts, the code snippet below is not working as expected: let userID = req.user._id, marketName = req.body.marketName, itemNam ...

Error: Exceeded the hook limit during rendering - reactjs problem

I keep encountering an issue when trying to retrieve main data using useSwr, where I call another function with axios and end up with an Uncaught Error: Rendered more hooks than during the previous render. I've attempted to troubleshoot this countless ...

How can I sync changes between two variables in node.js?

Is there a method to create a shared variable in JavaScript? Here is an example of what I am attempting to achieve: var id = 5; var player = new Player(id); var array1[0] = player; var array2[0] = player; array1[0].id = 8 console.log(array1[0]); // ...

What are the best techniques for resizing a bar graph column to perfectly and proportionally match its container size?

Creating a basic bar chart library using vanilla JS and jQuery is what I'm working on. The code below is functional: var userData = { 'Black': 8, 'Latino': 6, 'Native': 4, 'Asian': 10, 'White': 12, & ...

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

In my current project, there is a lot of validation required using Express-Validator. In each file, I find myself repeating the same validation code: //Validation and Sanitizing Rules const validationRules = [ param('tab').isString().isLength({ ...

Unexpected behavior observed in while loop with dual conditions

To break the while loop, I need two conditions to be met - res must not be undefined, which only happens when the status code is 200, and obj.owner needs to match a specific value I have set. Since it takes a few seconds for the owner on that page to updat ...

Is there a way to create a singular asynchronous function that can retrieve data from multiple sources and provide

I'm currently working on an async function that fetches data from multiple sources, waits for all requests to complete, and then returns the JSON results as an array. Here is what I have so far: file1.js const searchResults = await Api.search(search ...

Reloading the table columns in a JSP page with a click of the refresh button on every row using AJAX and JavaScript

Hey there! I have a JSP page with a table where data is displayed by iterating through a list from the action class. Each row in the table has a refresh button at row level. Here is a snippet of the JSP: <script type="text/javascript"> functi ...

Adding a blank data-columns attribute using jQuery:

I am trying to add the data-columns attribute for salvattore.js, but I am facing an issue where I cannot simply add the attribute without providing a value. Currently, my code looks like this: $('#liste-vdl div.view-content').attr("data-columns" ...