webentwicklung-frage-antwort-db.com.de

Angularjs Fehler Unbekannter Anbieter

Ich versuche, die konfigurierten Werte author und version in angular Value Service in HTML-Seite anzuzeigen. Der Versionscode wird gut angezeigt, aber nicht der Autorenname ist der 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>

Hier ist die Richtlinie ...

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

Und hier ist der Serviceabschnitt, in dem die Werte author und version konfiguriert sind

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

Der Fehler, den ich in der Entwicklerkonsole erhalte, ist

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

Stellen Sie sicher, dass Sie diese Module ( myApp.services und myApp.directives) wie folgt als Abhängigkeiten Ihres Haupt-App-Moduls laden:

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

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

49
bmleite

bmleite hat die richtige Antwort bezüglich der Einbindung des Moduls.

Wenn dies in Ihrer Situation korrekt ist, sollten Sie auch sicherstellen, dass Sie die Module nicht in mehreren Dateien neu definieren.

Merken:

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

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

Wenn Sie also ein vorhandenes Modul erweitern, denken Sie daran, es nicht zu überschreiben, wenn Sie versuchen, es abzurufen.

31
Jukka Dahlbom