CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
agasthyan
agasthyan

Reputation: 725

Angularjs error Unknown provider

I'm trying to display the configured values author and version in angular value service in html page.Version code is displayed fine but not the author name Here is the html code

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>
  <div>Author is : <span app-author></span></div>


  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

Here is the directive...

angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }])
  .directive('appAuthor', ['author', function(author) {
    return function(scope, elm, attrs){
        elm.text(author);
    };
  }]);

And here is the service portion where author and version values are configured

    angular.module('myApp.services', []).
  value('version', '0.1')
  .value('author','JIM');

The error i'm getting in developer console is 

Error: Unknown provider: authorProvider <- author <- appAuthorDirective

Upvotes: 31

Views: 101523

Answers (2)

Jukka Dahlbom
Jukka Dahlbom

Reputation: 1740

bmleite has the correct answer about including the module.

If that is correct in your situation, you should also ensure that you are not redefining the modules in multiple files.

Remember:

angular.module('ModuleName', [])   // creates a module.

angular.module('ModuleName')       // gets you a pre-existing module.

So if you are extending a existing module, remember not to overwrite when trying to fetch it.

Upvotes: 31

bmleite
bmleite

Reputation: 26880

Make sure you are loading those modules (myApp.services and myApp.directives) as dependencies of your main app module, like this:

angular.module('myApp', ['myApp.directives', 'myApp.services']);

plunker: http://plnkr.co/edit/wxuFx6qOMfbuwPq1HqeM?p=preview

Upvotes: 48

Related Questions