AngularJS utilizes a concept called `$inject` for dependency injection

I'm facing an issue with injecting services into my controller. Below is the code and the outcome of this process.

user.service.js:

class UsersService{
    constructor(){}
    usersServiceFn () {
        return {
            name: 'TEST'
        };
    };
}
export default UsersService;

users.jsp:

import UsersService from './users.service';

export default app => {
  app.factory('users', UsersService);

  if (ENVIRONMENT === 'test') {
    require('./users.test.js');
  }
}

service.js:

import usersService from './users/users';

export default app => {
  INCLUDE_ALL_MODULES([usersService], app);
}

index.js:

import angular from 'angular';
import angularUIRouter from 'angular-ui-router';
import appComponents from './components/components.js';
import commonComponents from './common/components.js';
import appServices from './services/services.js';
import appConfiguration from './app.config';

// Single Style Entry Point
import './index.scss';

if (ENVIRONMENT === 'test') {
  console.log('ENV:', ENVIRONMENT);
  require('angular-mocks/angular-mocks');
}

const app = angular.module('app', ['ui.router']);
appComponents(app);
commonComponents(app);
appServices(app);

home.controller.js:

 class HomeController {

        constructor($scope, $http, usersService) {
            this.$scope = $scope;
            this.$http = $http;
            this.usersService = usersService;
            this.$scope.persons = null;
            this.name = 'home';
            this.$scope.surname ='ZZZZZZ';
            this.$scope.randomNumb = Math.random();
            this.initRecords();
            this.range();
            this.watchText();
        }

   /..../    


    }
    HomeController.$inject = ['$scope', '$http', 'usersService'];
    export default HomeController;

And here's the outcome:

I've been trying to troubleshoot but I'm unsure of where the problem lies.

**structure: **

Answer №1

Revise this

app.factory('users', UsersService);

And update to

app.factory('usersService', UsersService);

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

Angular tutorial: creating a table with JSON data

Trying to replicate a payout structure similar to Full Tilt Payout Structure, I came up with the following map: $scope.payoutStructure = { '2-4': { 1: 100, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, }, ...

What is the best way to access an element within a child object?

Is there a way to access the value of e without specifying which group, using only obj and e? Can this method also be used to obtain the value of a? Appreciate any help! let obj:Object = { a: 'value1', b: 'value2', group1: { ...

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

The JavaScript indexOf method in an unordered list incorrectly returns the index of a specific event

Looking to retrieve the index number of an 'li' element within a 'ul' from the HTML structure. I attempted to convert the 'ul' into a list and access its children using: [...ul.children] However, upon targeting any of the chi ...

Using the key value from a JSON object of arrays of objects as HTML content in Angular during iteration

Here is the JSON schema I am working with. My goal is to display links within each object's description in my application: { "notes": { "long random ID number 1": [ { "name": "test 1", "description": "<a href='http: ...

Sending an error code that is specific to the situation to the AJAX error function

I am attempting to send a custom error code to the client-side for ajax error handling. On the server side: $response = array(); if ( empty($post['parent_id']) ) { $response = array('error' => true, 'status_code' => ...

Preventing Selection of Days Before Tomorrow on Jquery UI Datepicker

I am having trouble setting tomorrow as the default date and disabling days before tomorrow in my code. Currently, it shows today as the default and disables dates before today. Here is the view: <input id="date_modified" type="text" class="form-contr ...

Finding the index of a clicked link using jQuery

This is the code I have written: <div> <h2><a href="link-here">Link Text</a></h2> <p>Description</p> <h2><a href="link-here">Link Text</a></h2> <p>Description</p> <h2>< ...

Struggling to implement Google OAuth in a MERN stack - facing a 400 bad request error with the package @react-oauth/google

Here is the React form and relevant code sections for the issue: import { useGoogleLogin } from '@react-oauth/google'; const SignUpForm = () => { const navigate = useNavigate(); const [name, setName] = useState(""); const [email, setEm ...

Having trouble with your angular.jg ng controller functioning properly?

Having trouble getting any content to show up from the media object! The plate object seems to be malfunctioning. <!DOCTYPE html> <html lang="en" ng-app="confusionApp"> <head> <meta charset="utf-8"> <met ...

Guide to interacting with the Li element using JavaScript in Selenium

Is there a way to click on the item inside the li element using a Selenium script with JavaScript? I've tried different methods like By.cssSelector or by css, but I keep getting an ElementClickInterceptedError: element click intercepted:Other element ...

The CSS navigation bar is not properly aligned in the center

This menu was constructed by me: JSBIN EDIT ; JSBIN DEMO Upon closer inspection, it appears that the menu is not centered in the middle of the bar; rather, it is centered higher up. My goal is to have it positioned lower, right in the middle. I ...

How can JavaScript be used to parse an XML file? Should we consider using SAX for handling large XML files

Hello everyone, I am feeling very frustrated and overwhelmed with my current situation. I have been searching everywhere for a solution but seem to be going in circles. This will be my first attempt at working with xml and it's quite daunting, espec ...

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Currently, I am working on a Next.js project that involves using the Context API. The data fetched from the Context API works perfectly fine, but I am encountering errors with TypeScript and I'm not sure how to resolve them. Error: Property openDialo ...

I possess a dataset and desire to correlate each element to different elements

[ { "clauseId": 1, "clauseName": "cover", "texts": [ { "textId": 1, "text": "hello" } ] }, { "clauseId": 3, "clauseName": "xyz", "te ...

AngularTS - Using $apply stops the controller from initializing

Every time I launch the application, the angular {{ }} tags remain visible. Removing $scope.$apply eliminates the braces and displays the correct value. I am utilizing Angular with Typescript. Controller: module Application.Controllers { export class Te ...

My collection consists of objects arranged in this manner

let attributeSet = [{ "id": 1, "value": 11 }, { "id" : 1, "value": 12 }, { "id" : 1, "value" : 13 }, { "id": "2", "value& ...

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

Escaping Characters in Javascript

I have a table where rows are dynamically added. One of the cells (cell8) should trigger a javascript function (saveDeleteAction(rowIndex)) when clicked, passing the rowIndex as a parameter. However, the HTML code generated does not display the correct val ...

Locate an item within a multi-level array and append something following it

I have a complex array structure: [0] { [0] { [0]: 'Element 1' [1]: 'Element 2' [2]: 'Element 3' [3]: 'Element 4' } [1] { [0]: 'Element 5' [1]: & ...