web-dev-qa-db-fra.com

Angularjs error Fournisseur inconnu

J'essaie d'afficher les valeurs configurées author et version in angular service de valeur en page HTML. Le code de version s'affiche correctement, mais pas le nom de l'auteur ici. est le code html

    <!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>

Voici la 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);
    };
  }]);

Et voici la partie service où les valeurs author et version sont configurées

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

L'erreur que je reçois dans la console du développeur est

Error: Unknown provider: authorProvider <- author <- appAuthorDirective
javascriptangularjsangularjs-directive
32
agasthyan

Assurez-vous de charger ces modules ( myApp.services et myApp.directives) en tant que dépendances de votre module principal de l'application, comme ceci:

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

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

49
bmleite

bmleite a la bonne réponse pour inclure le module.

Si cela vous convient, veillez également à ne pas redéfinir les modules dans plusieurs fichiers.

Rappelles toi:

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

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

Donc, si vous étendez un module existant, n'oubliez pas de ne pas écraser lorsque vous essayez de le récupérer.

31
Jukka Dahlbom