angular-resource not being properly injected with AMD

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

Frage

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
War es hilfreich?

Lösung 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.

Andere Tipps

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"] );
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top