angular-resource not being properly injected with AMD

StackOverflow https://stackoverflow.com/questions/22987298

Domanda

I fail to make angular.resource.js work with angular.js. Angular is loaded but it seems angular.resource is not.

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 suppose it is somethign related to the shim config but I fail to realize it:

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

Using AngularJS v1.3.0-beta.2 and angular.resource (same version).

I get:

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
È stato utile?

Soluzione 2

Of course you have to pass 'ngResource' as a dependency of your angular module !

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

The AMD don't break the dependency system of AngularJS.

IMHO,use requirejs with AngularJS is a bad idea ... because you've few benefits to use it. Only the script order insertion, not the modularity because Angular take is own system to manage modules.

Hope it helps.

Altri suggerimenti

You should add ngResource module as a dependency for your app.customer module in the requires argument: http://docs.angularjs.org/api/ng/function/angular.module

var module = angular.module( "app.customer", ["ngResource"] );
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top