2013-08-04 12 views
36

Ich befolge die Video-Tutorials auf egghead.io aber während zu versuchen, seinem Beispiel zu folgen, als er eine Fabrik erstellt (siehe Video here) bekomme ich immer "Winkel ist nicht definiert" Reference Fehler, aber ich habe die Winkel Skript enthaltenWas ist die Ursache für "eckigen ist nicht definiert"

Dies ist meine hTML-Seite:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Prototype</title> 
    <link rel="stylesheet" type="text/css" href="foundation.min.css"> 
    <script type="text/javascript" src="main.js"></script> 
    </head> 
    <body> 

    <div data-ng-app=""> 

     <div data-ng-controller="FirstController"> 
      <input type="text" data-ng-model="data.message"> 
      <h1>{{ data.message }}</h1> 
     </div> 



     <div data-ng-controller="SecondController"> 
      <input type="text" data-ng-model="data.message"> 
      <h1>{{ data.message }}</h1> 
     </div> 


    </div> 
    <script type="text/javascript" src="angular.min.js"></script> 
    </body> 
</html> 

und das ist mein Javascript-Datei "main.js":

//Services 
    // step 1 create an app        
    var myApp = angular.module('Data', []). 
    // tep 2 create factory 
       // Service name, function 
    myApp.factory('Data', function(){ 
     return { message: "I'm Data from a Service" } 
    }); 



//Controllers 
    function FirstController($scope, Data){ 
     $scope.data = Data; 
    } 

    function SecondController($scope){ 

    } 

Ich habe ein paar Posts gelesen, wo ähnliche passieren (here) und bitte korrigieren Sie mich, wenn ich falsch liege, aber ich denke, es ist mit Bootstrapping zu tun und ich habe versucht manuell mit angular.bootstrap(document, ['Data']); bootstrapping, aber mit keinem Erfolg, immer noch den gleichen Fehler.

Aber was ich wissen will ist, warum dies für so viele Beispiele online funktioniert, wie die Egghead Video Serie, aber ich habe Probleme, da ich glaube, dass ich sein Video sehr genau verfolgt habe. Ist es in den letzten Versionen eine Winkeländerung?

Antwort

85

Sie müssen Ihre Skript-Tag nach der, die auf Angular verweist. Bewegen Sie es aus dem head:

<script type="text/javascript" src="angular.min.js"></script> 
<script type="text/javascript" src="main.js"></script> 

Die Art und Weise Sie es festgelegt haben nun, Ihr Skript ausgeführt wird, bevor Angular auf der Seite geladen wird.

+0

Vielen Dank, einen dummen Fehler von mir sehr geschätzt, werde ich Ihre Antwort ausnehmen, wenn es mir zu – jonnie

+3

erlaubt ich in das gleiche Problem lief. Es wird von Egghead in einem Video verursacht, bei dem angular.min.js am unteren Rand der Seite definiert ist. In einem anderen Video wird es in den Header im oberen Bereich verschoben, wo main.js definiert ist. – homaxto

+1

Mine war ein sehr dummer Fehler. Ich hatte keinen Link zu der 'angular.js' Datei in der HTML Datei. Ich hatte den gleichen Fehler. – Deke

0

Sie haben nicht die Script-Tags für Winkel js platziert

Sie können dies tun, indem CDN oder Herunterladen der AngularJS für Ihr Projekt verwenden und es dann Referenzierung

danach können Sie Ihre eigene Java-Skript hinzufügen müssen in Ihrem Fall main.js

die

+2

Du hast es nicht versucht, oder? – Tibrogargan

+0

Entschuldigung meine schlechte ich verpasste die letzte