AngularJS - Injecting a Provider

Question

EDIT: using YEOMAN to scaffold my app,

I have the following YEOMAN generated provider

'use strict';

angular.module('myApp')
  .provider('myProvider', function () {

    // Private variables
    var salutation = 'Hello';

    // Private constructor
    function Greeter() {
      this.greet = function () {
        return salutation;
      };
    }

    // Public API for configuration
    this.setSalutation = function (s) {
      salutation = s;
    };

    // Method for instantiating
    this.$get = function () {
      return new Greeter();
    };
  });

and I'm trying inject it in my app config like so:

'use strict';

angular.module('myApp', [
        'ngRoute',
        'myProvider'
    ])
    .config(function ($routeProvider, myProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

And I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module lpSocialApp due to:
Error: [$injector:modulerr] Failed to instantiate module myProvider due to:
Error: [$injector:nomod] Module 'myProvider' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

What am I missing?

Answer 1

I can see two mistakes in your code:

1) You cannot inject 'myProvider' in your application module since 'myProvider' is defined in your application module.

2) The name of 'myProvider' is wrong, Angular automatically append 'Provider' to your provider.

Here is the fix:

1) Define your provider in a dedicated module and add this new module in your application module dependencies.

2) Rename your provider to 'my' (or inject 'myProviderProvider' in your config function) :

angular.module('myProviderModule', [])
    .provider('my', function () { // or 'myProvider'

        // Private variables
        var salutation = 'Hello';

        // Private constructor
        function Greeter() {
            this.greet = function () {
                return salutation;
            };
        }

        // Public API for configuration
        this.setSalutation = function (s) {
          salutation = s;
        };

        // Method for instantiating
        this.$get = function () {
            return new Greeter();
        };
    });

angular.module('myApp', [
    'ngRoute',
    'myProviderModule'
])
.config(function ($routeProvider, myProvider) { // or 'myProviderProvider'
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
});

See this fiddle: http://jsfiddle.net/Z3k2s

Answer 2

You are confusing provider with modules. Modules include set of providers, services and factories.

You also should NOT add provider suffix when defining a provider, or else you have to inject it like myProviderProvider.

Also you look like you are confusing the syntax on angular.module:

// create a new module foo.bar with dependency to ngRoute
angular.module('foo.bar', ['ngRoute']);

// create a new module woo.hoo with NO dependency
angular.module('woo.hoo', []); 

// get already created module foo.bar
angular.module('foo.bar')

Your code fixed:

'use strict';

angular.module('someModule', [])
  .provider('my', function () {

    // Method for instantiating
    this.$get = function () {
      return {}// return something
    };
  });



'use strict';

angular.module('myApp', [
        'ngRoute',
        'someModule'
    ])
    .config(function ($routeProvider, myProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

Answer 3

You are attempting to load a dependent module named myProvider:

angular.module('myApp', [
        'ngRoute',
        'myProvider'
    ])

myProvider is already in the myApp module, so you can do this:

angular.module('myApp', [
        'ngRoute'
    ])
    .config(function ($routeProvider, myProvider) {