2016-05-02 17 views
1

Ich versuche, ein Quiz application.so dafür zu schaffen i ein Modul und Controller mit Winkel js erstellt, ich weiß nicht, das Problem die Reference zeigt: Winkel nichtReference: Winkel definiert nicht

definiert ist
<!DOCTYPE html> 
<html ng-app="codeWar"> 
    <head> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="page-header"> 
     <h1 class="text-success">Raja's Programming Quiz</h1> 
     <h3> 
      <small>Learn about the programming languages below before you decide to take on <thead> 
      <strong>Programming Quiz</strong></small> 
     </h3> 
     </div> 
     <div class="" ng-controller="listCtrl as list"> 
     <p ng-repeat="pLanguage in list.data"> 
      {{pLanguage}} 
     </p> 

     </div> 
    </div> 


    <!-- Our Application scripts --> 
    <script type="text/javascript" src="js/controller/list.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script src="angular/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

erstellt I Listenmodul die json Daten in der Ansicht

list.js laden

(function() { 
    angular 
      .module("codeWar") 
      .controller("listCtrl", ListController); 
      function ListController() { 
       var view_model = this; 
       vm.data = programmingLanguageData; 
      } 
      var programmingLanguageData = [ 
      { 
       language:"C", 
      image_url:"https://lh3.ggpht.com/vrKC4cLAuEFf2-FdDfc02iuCHa5TnPRd-uecZZY8vCzxFnCN-C0PGZ-qsTKeKSIVacA=w300", 
      paradigm:"Imperative (Procedural) , Structured", 
      creator:"Dennis Ritchie", 
      }, 
      { 
       //json data 
      } 

      ] 
})(); 

app.js

(function() { 
     angular 
      .module("codeWar", []); 


})(); 

Fehler bei log

ReferenceError: angular is not defined - list.js:2:5

ReferenceError: angular is not defined - app.js:2:7

Error: No module: codeWar - angular.min.js:17:76

+1

Ändern Sie die Reihenfolge der Dateien, angular.min.js muss der erste sein –

+0

Verschieben aufgenommen werden 'angular.min .js' zum Kopfbereich –

Antwort

0

versuchen die Reihenfolge der js bestellen oberen AngularJS zu ändern dann Ihr lokales Skript, sollte es funktionieren. ..

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
     <script type="text/javascript" src="js/controller/list.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 
+0

versuchen Sie dies ... entfernen Sie Ihr lokales angularjs-Skript . – nisar

+0

aktualisiert das Skript, versuchen Sie dies .. – nisar

+0

in Antworten nur, ersetzen Sie einfach das lokale Skript zu http Link .... entfernen Sie Ihre app.js Es ist nicht erforderlich, Sie initialisiert Modul zweimal, warum? !!! – nisar

1

Sie müssen Winkel importieren, bevor es

<script src="angular/angular.min.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<script type="text/javascript" src="js/controller/list.js"></script> 

use this example http://jsfiddle.net/Lvc0u55v/3332/ 
+1

ich habe es hinzugefügt, immer noch das gleiche Problem – RajaRaman

+0

hast du die Reihenfolge geändert, zuerst die angular.min.js und dann alles andere importieren? –

+0

Fehler: [$ injector: nomod] http://errors.angularjs.org/1.4.9/$injector/nomod?p0=codeWar – RajaRaman

-1

Geben Sie dieses ein

<script type="text/javascript" src="js/controller/list.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
    <script src="angular/angular.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

versuchen mit der Wenn es dann nicht alle Ihre Skripte zwischen </body> und </html> setzen funktioniert.

+0

Dies ist eine schlechte Praxis – Gianmarco

+0

können Sie mir sagen, welche? – Atula

+0

setzen Sie es als letzte Marke innerhalb – Gianmarco

-1

Sie sollten Angularjs erste Ihre Skripte laden, um sollte wie folgt sein:

<script src="angular/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<script type="text/javascript" src="js/controller/list.js"></script> 
+0

jQuery sollte vor eckig importiert werden – Gianmarco

Verwandte Themen