2016-07-05 13 views
0

ich: „Uncaught Reference: Winkel ist nicht definiert“ für den folgenden Code:Angular ist nicht definiert, obwohl ich es bereits definiert

<!DOCTYPE html> 
<html lang="en" ng-app="confusionApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>Ristorante Con Fusion: Menu</title> 
     <!-- Bootstrap --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="menuController as menuCtrl"> 
      <div class="col-xs-12"> 
       <ul class="media-list"> 
        <li class="media" ng-repeat="dish in menuCtrl.dishes"> 
        <div class="media-left media-middle"> 
         <a href="#"> 
          <img class="media-object img-thumbnail" 
           ng-src={{dish.image}} alt="Uthappizza"> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h2 class="media-heading">{{dish.name}} 
          <span class="label label-danger">{{dish.label}}</span> 
          <span class="badge">{{dish.price | currency}}</span></h2> 
         <p>{{dish.description}}</p> 
         <p>Comment: {{dish.comment}}</p> 
         <p>Type your comment: 
          <input type="text" ng-model="dish.comment"></p> 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <script> 
     var app = angular.module('confusionApp',[]); 
     app.controller('menuController', function() { 
      var dishes = [ 
       { 
        name:'Uthapizza', 
        image: 'images/uthapizza.png', 
        category: 'mains', 
        label:'Hot', 
        price:'4.99', 
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
        comment: '' 
       }, 
       { 
        name:'Zucchipakoda', 
        image: 'images/zucchipakoda.png', 
        category: 'appetizer', 
        label:'', 
        price:'1.99', 
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
        comment: '' 
       }, 
       { 
        name:'Vadonut', 
        image: 'images/vadonut.png', 
        category: 'appetizer', 
        label:'New', 
        price:'1.99', 
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
        comment: '' 
       }, 
       { 
        name:'ElaiCheese Cake', 
        image: 'images/elaicheesecake.png', 
        category: 'dessert', 
        label:'', 
        price:'2.99', 
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
        comment: '' 
       } 
      ] 
     }); 
    </script> 
    <script src="../bower_components/angular/angular.min.js"></script> 

</body> 

</html> 

Ich verstehe wirklich nicht, was das Problem, da ich hier bereits definiert Angularjs in der Zeile:

<script src="../bower_components/angular/angular.min.js"></script> 

ich habe auch versucht, zwischen den beiden letzten ... Blöcke zu wechseln und nicht zu einem anderen Ergebnis bekommen haben.

+0

Können Sie Angulars Bibliotheksdatei abrufen? –

+0

Was meinst du? Ich kann diese Datei öffnen ... – CrazySynthax

+0

Sie haben Ihr Modul vor Angulars Bibliotheksdatei eingefügt Ich denke –

Antwort

0

Verschieben Sie das eckige Skript-Tag an den Kopf. Ihr Inline-Skript

var app = angular.module('confusionApp',[]); 

wird auch ausgeführt, bevor Winkel Bibliothek

+0

Ich habe es getan. Jetzt bekomme ich eine leere Webseite. – CrazySynthax

+1

Statt 'var Gerichte =' Verwenden 'this.dishes =' –

+0

dieses geholfen :-) Können Sie erklären, warum? – CrazySynthax

0

Sie sollten <script src="../bower_components/angular/angular.min.js"></script> vor <script> var app = angular.module('confusionApp',[]); ... setzen geholt wird.

+0

Ich habe es getan. Jetzt bekomme ich eine leere Webseite. – CrazySynthax

+0

Überprüfen Sie die Konsole, um zu sehen, was passiert. – Qianyue

0

Verschieben Sie dies zu Kopf.

<script src="../bower_components/angular/angular.min.js"></script> `before` <script> var app = angular.module('confusionApp',[]); .... 
0

Danke allen und vor allem @Dygen.

Der richtige Code ist:

<!DOCTYPE html> 
<html lang="en" ng-app="confusionApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 
    <title>Ristorante Con Fusion: Menu</title> 
     <!-- Bootstrap --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div class="container"> 
     <div class="row row-content" ng-controller="menuController as menuCtrl"> 
      <div class="col-xs-12"> 
       <ul class="media-list"> 
        <li class="media" ng-repeat="dish in menuCtrl.dishes"> 
        <div class="media-left media-middle"> 
         <a href="#"> 
          <img class="media-object img-thumbnail" 
           ng-src={{dish.image}} alt="Uthappizza"> 
         </a> 
        </div> 
        <div class="media-body"> 
         <h2 class="media-heading">{{dish.name}} 
          <span class="label label-danger">{{dish.label}}</span> 
          <span class="badge">{{dish.price | currency}}</span></h2> 
         <p>{{dish.description}}</p> 
         <p>Comment: {{dish.comment}}</p> 
         <p>Type your comment: 
          <input type="text" ng-model="dish.comment"></p> 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <script src="../bower_components/angular/angular.min.js"></script> 
    <script> 
     var app = angular.module('confusionApp',[]); 
     app.controller('menuController', function() { 
      this.dishes = [ 
       { 
        name:'Uthapizza', 
        image: './images/uthapizza.png', 
        category: 'mains', 
        label:'Hot', 
        price:'4.99', 
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
        comment: '' 
       }, 
       { 
        name:'Zucchipakoda', 
        image: 'images/zucchipakoda.png', 
        category: 'appetizer', 
        label:'', 
        price:'1.99', 
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', 
        comment: '' 
       }, 
       { 
        name:'Vadonut', 
        image: 'images/vadonut.png', 
        category: 'appetizer', 
        label:'New', 
        price:'1.99', 
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?', 
        comment: '' 
       }, 
       { 
        name:'ElaiCheese Cake', 
        image: 'images/elaicheesecake.png', 
        category: 'dessert', 
        label:'', 
        price:'2.99', 
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', 
        comment: '' 
       } 
      ] 
     }); 
    </script> 


</body> 

</html> 

Die Schlussfolgerungen sind: 1. Es gibt keine Notwendigkeit angular.min.js im Header-Block zu laden. 2. Dennoch muss angular.min.js vor der Zeile "angular.module" geladen werden. 3. Variablen innerhalb des Contollers sollten von this.varname deklariert werden.

Verwandte Themen