Unexpected provider error in AngularJS when using basic module dependencies

I am encountering an issue with my module setup involving core, util, and test.

  • The util module has no dependencies and one provider
  • The test module depends on util and core, and has one controller
  • The core module depends on util, and has a provider that uses a provider from util

When I try to initialize the core module, I receive an error because it cannot find the provider from util. If I remove this provider injection, everything works as expected.

I am unsure of what mistake I might be making.

var util = angular.module('util', []);
var core = angular.module('core', ['util']);
var test = angular.module('test', ['core', 'util']);


core.provider('core.OC', ['util.Path', function(Path){
  this.$get = function(){
    return {
      get: function() { return 'OC!';}
    }
  };
}]);

util.provider('util.Path', function(){
  this.$get = function(){
    return {
      get: function() { return 'Path!';}
    }
  };
});

test.controller('MainCtrl', ['$scope','util.Path', function($scope, Path) {
  $scope.name = Path.get();
}]);

For reference, here is a plnkr link demonstrating this setup: http://plnkr.co/edit/7VhdrdleNXHqqucSUcv9

Answer №1

Consider integrating util.Path into your factory function instead. The core.OC provider is being called too early to inject util.Path. You will need to inject it at a later point, when the factory function is executed.

http://plnkr.co/edit/7vBszzVlo14q0pljOarv?p=preview

core.provider('core.OC', function(){
  this.$get = ['util.Path', function(Path){
    return {
      get: function() { return 'OC!';}
    }
  }];
});

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

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

Leveraging checkbox selections to communicate with the controller in Angular JS

I am working with a set of checkboxes that are dynamically populated from a database. The value of each checkbox corresponds to a Book Id. My challenge now is figuring out how to pass the selected book Ids to my controller when the user clicks the Save bu ...

Transmit information to the controller using jQuery in a C# MVC environment

Here is my jQuery script code snippet. The script works perfectly and stores the data array/object in a variable called dataBLL. var dataBLL = []; $('#mytable tr').each(function (i) { dataBLL.push({ id: $(this).find('td:eq(0)').text( ...

Utilizing JQuery to Modify XML File Content

Looking to retrieve data from an XML file using jQuery and display it in a textbox? If you want changes made in the textbox to reflect back in the original XML file, there are ways to achieve this. Here is some code that can help: <html><head&g ...

I'm looking to instantiate a Backbone collection outside of a script - how can I do that?

I have created my backbone collection named "Events" with a model called "Event". I want to create the backbone collection in this manner: Check out my code below: <script src="<?php echo site_url(); ?>js/backbone-calendar.js"></script&g ...

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question: When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this: getFavoriteLocations: function() { ...

What could be the reason why the toggleClass function is not being run

I've been running into a little issue with using the .toggleClass function in my code. It seems to work inconsistently, and despite reading various posts on the topic, I haven't found a solution that works for me. Could you provide some assistan ...

Selection box and interactive buttons similar to those found in Gmail

Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

fiddle: https://jsfiddle.net/f8hscrd0/66/ html: <body> <div id="canvas_div"> </div> </body> js: let colors = [ ['#000','#00F','#0F0'], ['#0FF','#F00','#F0F&a ...

AngularJS: Loading $http Responses in Batches of 5 or Fewer Items

Currently, I am developing a product catalog application using the Ionic Framework. The backend is powered by PHP to fetch products from the database, and AJAX is utilized to display them on the frontend. Everything seems to be functioning well until I att ...

Steps to send a table to PHP and store it as a text file

I have this program for a form data entry. It includes text boxes to input values, and upon clicking 'Submit', the input values should be displayed below while resetting the text box for another set of inputs. The issue I am facing is with the sa ...

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

When trying to send files to my server using a post request, I encountered the following error: Error: Request header field Content-Type is not allowed by Access-Control-Allow-Headers. After researching the issue, I added the necessary headers: $h ...

The Vue/Nuxt application displays content duplication on each page, rendering the content twice without duplicating the components

I recently delved into Vue/Nuxt programming and worked through a tutorial on adding a blog, which I then customized for my website. Everything functions perfectly except that the content is rendering twice. It goes from rendering NavPage (component) > cont ...

Issue with passing down attribute values in polymer web components

Recently, I embarked on creating my own unique set of WebComponents library over at Github. Through testing, I found that everything functions smoothly in isolation. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

"Encountering a 500 internal server error with jQuery and WordPress

I'm having issues implementing ajax into my WordPress project to dynamically load videos based on their post ID. Whenever I click on the video link, a 500 internal server error occurs. I'm sending the post ID through ajax to a PHP script where I ...

Exploring the syntax of typescript when using createContext

Just starting out with typescript and I have some questions. Could someone break down the syntax used in this code snippet for me? What is the significance of having two groups containing signIn, signOut, and user here? Is the first group responsible fo ...

Angular facilitates the seamless uploading of files to S3

Utilizing this particular plugin Alright, so here's the issue I'm facing: I have been able to generate a signed S3 URL on my server and successfully upload a file using the following method: How it used to work: shell curl -T file.jpg http:// ...

Prevent further triggering of the .click function when the user clicks repeatedly

Is there a way to prevent the .click function from executing if the user clicks too many times? This is my current code: $('button').click(function() { $('#bg').fadeToggle('200'); }); Check out the jsfiddle DEMO ...

Develop a custom class for importing pipes in Angular 4

Currently, I am working on creating a pipe that will replace specific keywords with the correct strings. To keep this pipe well-structured, I have decided to store my keywords and strings in another file. Below is the code snippet for reference: import { ...

Exploring AngularJS capabilities: Retrieving data and headers from an HttpResponse

Currently, I have a REST API developed using Spring Boot. In the frontend, AngularJS 1.5 is being used. The login service not only sends data but also includes a header. I am wondering how I can effectively read both the data and header on the AngularJS ...