Using Angular's built-in dependency injection with the $resource factory allows for

Question

Using Angular's built-in dependency injection with the $resource factory allows for

Question regarding Dependency Injection on factory resource:

As far as I know, the following example is the recommended approach for injecting dependencies in Angular1:

angular.module('myApp').factory('Resource', Resource);

Resource.$inject = ['$resource', 'CONSTANTS'];

function Resource($resource, CONSTANTS) {
  return $resource(CONSTANTS.server_url + '/resource/:id');
}

However, I am encountering issues when using it in conjunction with the new keyword in my Controller:

var resource = new Resource();

This leads to an error stating that CONSTANTS is undefined. When I use the following syntax, it functions correctly.

angular.module('myApp').factory('Resource', ['$resource', 'CONSTANTS', function($resource, CONSTANTS) {
  return $resource(CONSTANTS.server_url + '/resource/:id');
}]);

Can you please explain why this occurs?

javascript angularjs dependency-injection

Answer 1

Answer №1

When working with Angular, it's important to use Angular's injection system for it to work properly. If you try to create a new instance of a resource by using new Resource(), you're essentially defining a plain JavaScript "class" without tapping into Angular's dependency injection system; in this case, the $inject property on Resource won't have any effect.

By utilizing

module(..).factory('Resource', ..)

, you are declaring 'Resource' as an injectable dependency. To make use of this dependency in your controller, you need to reference it like so:

module(..).controller('MyController', ['Resource', function (Resource) {
    Resource.get(...)
}]);

Answer 2

When working with Angular, it's important to use Angular's injection system for it to work properly. If you try to create a new instance of a resource by using new Resource(), you're essentially defining a plain JavaScript "class" without tapping into Angular's dependency injection system; in this case, the $inject property on Resource won't have any effect.

By utilizing

module(..).factory('Resource', ..)

, you are declaring 'Resource' as an injectable dependency. To make use of this dependency in your controller, you need to reference it like so:

module(..).controller('MyController', ['Resource', function (Resource) {
    Resource.get(...)
}]);

Using Angular's built-in dependency injection with the $resource factory allows for

Answer №1

Similar questions

The react component is not defined within the <Popup></Popup> tag

Maintain scroll position during ajax request

Recursive instruction malfunctioning

Shut down jquery modal

Sending a file using Angular's $http service

Activating view loading in AngularJS through child window authentication (OAuth)

Utilizing null values within the map function in React JS

What does the "listen EACCESS localhost" error in the code signify and why is it occurring?

What is the best way to incorporate the "child_process" node module into an Angular application?

Evaluating the conditional rendering of a React child component using Jest and Enzyme

Implement a vertical scrolling animation in datatables

unable to implement multiple layouts while utilizing react-router

What is the most efficient way to use jQuery to retrieve the count of tags associated with a variable

Does v-if cause the jquery clock picker to malfunction?

the slider HTML control is missing a value

Conceal a different CSS class if a certain CSS class is present on the page

switch the anchor tag value and send it along with the URL

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Troubleshooting a React JS and material-ui issue

"Creating a custom comparator in Angular for sorting objects based on their keys