the proper injection of angular-resource is not being achieved in AMD

I am struggling to get angular.resource.js to work with angular.js. It seems like Angular is loaded but angular.resource is not being recognized.

index.html

<!doctype html>
<html>
    <head>
        <script>
          var require = {
            shim: {
              angular: {
                exports: "angular"
              },
              "angular.resource": {
                deps: [ "angular" ]
              }
            }
          };
        </script>
        <script src="require.js"></script>
    </head>
    <body>
        <div ng-controller="TagsController">
            Example
        </div>
        <script>
            require( ["TagsInit"] );
        </script>
    </body>
</html>

TagsInit.js

define([
    "angular",
    "angular.resource",
], function( angular ) {
    var module = angular.module( "app.customer", [] );

    module.controller( "TagsController", function( $scope, tagsService ) {
        console.log( "TagsController executed" );
    });
    module.service( "tagsService", function( $resource ) {
        console.log( "TagsService executed" );
    });

    angular.bootstrap( document.body, [ "app.customer" ] );
});

I suspect there may be an issue with the shim config that I'm overlooking:

shim: {
    angular: {
        exports: "angular"
    },
    "angular.resource": {
        deps: [ "angular" ]
    }
}

Currently using AngularJS v1.3.0-beta.2 along with angular.resource (same version).

The error message I'm receiving is:

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- tagsService
http://errors.angularjs.org/1.3.0-beta.2/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20tagsService

Answer №1

To enhance your app.customer module, it is essential to include the ngResource module as a dependency in the requires parameter. You can refer to this link for more information: http://docs.angularjs.org/api/ng/function/angular.module

var module = angular.module( "app.customer", ["ngResource"] );

Answer №2

It is essential to include 'ngResource' as a dependency for your Angular module!

Define your module in Angular with the following code: var module = angular.module("app.customer", ['ngResource']);

The AMD does not disrupt the dependency system of AngularJS.

In my opinion, using requirejs with AngularJS may not be the best idea... as there are limited advantages to doing so. It only allows for script order insertion, not true modularity since Angular has its own module management system.

I hope this information proves useful.

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

Tips on transferring information from AngularJS to a remote server using ngResource

Looking for guidance on utilizing the ngResource module? To send data to a server. To retrieve data from a server. I am attempting to send data to a Solr server. Utilizing AngularJS API. Using npm package manager to install packages to my application. Th ...

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

In the world of Vue3 and Vue-Router, accessing parameters using the $route object is a breeze during development, but may prove trick

Struggling with building a Vue3 app for production as 90% of my scripts are broken due to variables being undefined. It's baffling why this happens. One concrete example is: In dev mode, accessing a parameter value in my route using this.$route.param ...

Exporting the output of an AngularJS directive, specifically an ng-repeat, into an individual downloadable HTML file - a comprehensive guide

Can Angular be used to download the content of a div (specifically with ng-repeat directive) in a new HTML file? I attempted to do this: var content = 'file content'; var blob = new Blob([ content ], { type : 'text/html' }); $scope.ur ...

Transforming an object into an array of objects with the power of JavaScript

Looking to transform an object with the following structure: { From: {"A","B","C"}, To: {"A1","B1","C1"}, value: {1,2,3} } I need to convert this array: [ {from: "A" ,to: "A1" , value: 1 }, {from: "B" ,to: "B1" , value: 2}, {from: "C" ,to: "C1" ...

Is it possible to create a table using a loop in an SQLite query?

Welcome In the company where I work, Excel is currently being used to manage a large database of items for cost estimation purposes. To simplify this process, I am developing an Electron App that will replace Excel with a more user-friendly interface and ...

What is the best way to incorporate additional data into a TypeScript object that is structured as JSON?

I'm exploring ways to add more elements to an object, but I'm uncertain about the process. My attempts to push data into the object have been unsuccessful. people = [{ name: 'robert', year: 1993 }]; //I aim to achieve this peopl ...

Angular.JS feature malfunctioning

I've been stuck on this issue for a while now. My service isn't retrieving the data I expected, but it works fine when I include the $http request in my controller. (function(){ function customService($http) { this.fetchData = f ...

Validating American phone numbers using regular expressions

I came across a Javascript regex that is used to validate the different formats in which US phone numbers can be written. However, there seems to be an issue with it: it fails to match the second rule within this specific group: The first group of three ...

Is there a jQuery or Javascript alternative to CSS Counter?

Can a counter be implemented that changes the text of a tag directly using jQuery/Javascript? For example, if there were two tags like this: <a>hello</a> <a>bye</a> After executing the jQuery/JS function, the result would be: < ...

Running the command "npm start" in ghost (node.js) is causing an error

After successfully installing node.js, I attempted to set up Ghost. However, when running the installation for Ghost using npm install --productions I encountered the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

Is it possible to select a date from the datepicker, or should I move to the next month to find an

Protractor newbie here, attempting to test a date picker with Protractor. My attempt at selecting an available date: this.selectAvailableDate = element(by.css('td[aria-disabled="false"]')); If the desired date is not in the current month, I nee ...

When attempting to access the essential assets and dependencies, I encounter errors while executing the command $ rake bower:install

Here are the specifications of my environment: - Operating System: Mac - Rails Version: 5.0.5 - RVM Ruby Version: ruby-2.4.0 - Node Version: v6.11.2 - NPM Version: 5.3.0 To download the required assets, I execute the following comman ...

The proper management of AngularJS data models is essential for efficient operations

As I search through various resources online, I am discovering numerous methods for managing the data model utilized in our Angular templates. However, each source only offers a glimpse of the overall picture. In a complex application, it is crucial to con ...

What causes my slider to speed up with an increase in items and slow down with fewer items in bxslider?

Find more information here jQuery('.homepage_slider').bxSlider( { minSlides: 1, maxSlides: 4, slideWidth: 200, slideMargin: 30, ...

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

The button colors in Material Ui do not update properly after switching themes

React Material UI is being utilized in this project. Although the theme is being overridden, the colors of buttons and inputs remain unchanged. Here is how the Material UI theme is created in theme.js // @flow import { createMuiTheme } from '@materi ...

Adding JSON data to an array for Flot Diagram

I've been struggling with the task of organizing data into an array. The existing temp array is structured as follows: tmp[0][0] = "NY" tmp[0][1] = "52" tmp[1][0] = "FL" tmp[1][1] = "25" My goal is to transfer this data into a new array called data. ...

The resume button is failing to activate any functions

I recently encountered an issue with a JS file that is associated with a Wordpress Plugin, specifically a Quiz plugin featuring a timer. I successfully added a Pause and resume button to the quiz, which effectively pauses and resumes the timer. However, I ...

Determining the type of index to use for an interface

Imagine having an interface called Animal, with some general properties, and then either be a cat or a dog with corresponding properties. interface Dog { dog: { sound: string; } } interface Cat { cat: { lives: number; } } type CatOrDog = Cat | D ...