Search code examples
javascriptangularjsrequirejsamdangular-resource

angular-resource not being properly injected with AMD

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
Solution

  • 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.