2014-10-12 3 views
7

Ich versuche einen Serviceanruf von angular js zu machen. Ich habe die angular seed project .Und innerhalb der view1.js den folgenden Code geschrieben, den Dienst zu nennen:AngularJS Fehler: Modul 'ngResource' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder vergessen, ihn zu laden.

'use strict'; 

angular.module('myApp.view1', ['ngRoute','ngResource']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
    templateUrl: 'view1/view1.html', 
    controller: 'View1Ctrl' 
    }); 
}]) 
.factory('Entry', ['$resource',function($resource) { 
    return $resource('http://localhost:8000/emp/'); // Note the full endpoint address 
}]) 
.controller('View1Ctrl', ['Entry',function(Entry) { 
    var entries = Entry.query(function() { 
    console.log(entries); 
  }); 
}]); 

Hier ist die index.html, wo ich die erforderlichen Skripte enthalten sind:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>My AngularJS App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 
    <ul class="menu"> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
    </ul> 

    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <div ng-view></div> 

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

    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="angular-resource.js"></script> 
    <script src="app.js"></script> 
    <script src="view1/view1.js"></script> 
    <script src="view2/view2.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> 
</body> 
</html> 

Aber auf die App läuft, Es zeigt den folgenden Fehler in der Browser-Konsole:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:modulerr] Failed to instantiate module myApp.view1 due to: 
Error: [$injector:modulerr] Failed to instantiate module ngResource due to: 
Error: [$injector:nomod] Module 'ngResource' 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. 
+0

Versuch '[ 'Entry', function (Entry) {' –

+0

gut, der einen anderen Fehler zu werfen scheint 'Fehler: [$ Injektor: UNPR] Unbekannter Anbieter: $ resourceProvider <- $ resource <- Eintrag " – iJade

+1

" 'ngResource' zu' angular.module ('myApp.view1', ['ngRoute', 'ngResource']) ' –

Antwort

0

Sie fehlen die Abhängigkeitsliste.

Wenn Sie ein Array als abhängig übergeben, um injiziert zu werden, müssen Sie angular angeben.

['Entry', function (Entry) { }]; sollte den Trick tun, oder tun Sie einfach function (Entry) { }.

der Grund, warum Entry ist nicht definiert, ist, weil Winkel nicht weiß, was u injiziert werden müssen (ein Array-Notation an die DI-System vorbei sind die Winkel)

ps: sry für schlechtes Englisch

+0

@iJay sry für spät antworten, ich sehe '' ist es der richtige Weg? weil die meisten angularjs Pfad in Ihrem HTML scheint in 'bower_components' Verzeichnis zu sein :) –

+0

thnks anywaz .... eigentlich war es ein kleiner Tippfehler :) – iJade

1

Die einzige Sache, die Sinn macht, ist, dass die Datei angular-resource.js nicht richtig geladen ist, können Sie sich die Registerkarte des Netzwerks anschauen und sehen, welche Datei tatsächlich geladen ist und wie der Name des Moduls lautet? um sicherzustellen, dass Sie es richtig eingegeben haben.

(Sorry für nicht kommentieren, noch nicht genügend rep).

8
<script src="angular-resource.js"></script> 

sollte sein:

<script src="bower_components/angular-resource/angular-resource.js"></script> 
Verwandte Themen