CODEWITHSUNDEEP
angularjs
Krishna Srinivas
Krishna Srinivas

Reputation: 1700

angular: Error: Unknown provider during module.config()

I get Uncaught Error: Unknown provider: testProvider from myApp in the below code:

test is a custom provider.

angular.module('myApp', [])
  .config(function (testProvider) {
    testProvider.setPrefix("works: ");
  });

Full code is here:

angular.module('myApp', [])
  .config(function (testProvider) {
    testProvider.setPrefix("works: ");
  });


angular.module('myApp')
  .provider ("test", function () {
    var prefix;
    this.setPrefix = function(p) {
      prefix = p;
    }

    this.$get = function () {
      return {
        log: function(msg) {
          console.log (prefix + msg);
        }
      }
    }
  });

angular.module('myApp')
  .controller ("myCtrl", function($scope, test) {
    $scope.$watch ('myModel', function (newval) {
      test.log(newval);
    })
  });

Plunker link: http://plnkr.co/edit/zcIHRn?p=preview

Upvotes: 11

Views: 11944

Answers (2)

JasonZhang
JasonZhang

Reputation: 1

I created an enhanced example based on Michelle's first example, hope it could be helpful.

var myApp = angular.module('myApp', []);

myApp.provider('aPro', function() {
    console.log('provider initialized');

    this.config = function() {
        console.log("provider config");
    };

    // provider constructor
    this.$get = function() {
        console.log('provider constructor');
        return {
            log: function(msg) {
                console.log(msg);
            }
        };
    };
});

/* service act like factory with */
myApp.factory('aFac', function() {
    console.log('factory initialized');

    return {
        log: function(msg) {
            console.log(msg);
        }
    };
});

myApp.directive("test1", function() {
    console.log("test1 directive setup");

    return {
        compile: function() {
            console.log("directive compile");
        }
    }
});

myApp.directive("test2", function() {
    return {
        link: function() {
            console.log("test2 directive link");
        }
    }
});

myApp.run(function() {
    console.log("app run");
});

/* highlight! need add provider in config need suffix 'Provider' */
myApp.config(function(aProProvider) {
    console.log("app config");

    aProProvider.config();
});

myApp.controller('myCtrl', function($scope, aFac, aPro) {
    console.log("app controller");
    aFac.log("factory log");
    aPro.log("provider log");
});

link: http://jsfiddle.net/zhangyue1208/ysq3m/1826/

Upvotes: 0

Michelle Tilley
Michelle Tilley

Reputation: 159105

A call to

module.provider("test", ...);

is really a call to

module.config(function($provide) {
  $provide.provider("test", ...);
});

(See my wiki article on dependency injection for more details.)

And since config blocks run in the order they were declared, you just need to move the declaration of your provider to above the point where it's used. You'll often see it written something like this:

angular.module('myApp', [])
  .provider ("test", function () {
    var prefix;
    this.setPrefix = function(p) {
      prefix = p;
    }

    this.$get = function () {
      return {
        log: function(msg) {
          console.log (prefix + msg);
        }
      }
    }
  })
  .config(function (testProvider) {
    testProvider.setPrefix("works: ");
  })
  .controller ("myCtrl", function($scope, test) {
    $scope.$watch ('myModel', function (newval) {
      test.log(newval);
    })
  });

An example: http://plnkr.co/edit/AxTnGv?p=preview

If you really want to keep the concerns separate, you can create a new module and set up a dependency:

angular.module('logging', [])
  .provider ("test", function () {
    var prefix;
    this.setPrefix = function(p) {
      prefix = p;
    }

    this.$get = function () {
      return {
        log: function(msg) {
          console.log (prefix + msg);
        }
      }
    }
  })

angular.module('myApp', ['logging'])
  .config(function (testProvider) {
    testProvider.setPrefix("works: ");
  })
  .controller ("myCtrl", function($scope, test) {
    $scope.$watch ('myModel', function (newval) {
      test.log(newval);
    })
  });

Example: http://plnkr.co/edit/PWtDFG?p=preview

Upvotes: 25

Related Questions