2016-07-05 2 views
0

я получаю: «неперехваченный ReferenceError: угловой не определен» для следующего кода:Угловой не определен, хотя я уже определил его

<!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> 

Я действительно не понимаю, что здесь проблема, так как я уже определены angular.js в строке:

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

Я также попытался переключиться между двумя последними ... блоками и не получить другой результат.

+0

Вы можете получить файл библиотеки Angular? –

+0

Что вы имеете в виду? Я могу открыть этот файл ... – CrazySynthax

+0

Вы включили свой модуль перед файлом библиотеки Angular, я думаю –

ответ

0

Переместить угловой знак сценария в голову. Ваш встроенный скрипт

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

запускается на выполнение еще до угловой библиотеки получает принесло

+0

Я сделал это. Теперь я получаю пустую веб-страницу. – CrazySynthax

+1

Вместо 'вар блюд =' Используйте 'this.dishes =' –

+0

это один помогли :-) Вы можете объяснить, почему? – CrazySynthax

0

Вы должны поставить <script src="../bower_components/angular/angular.min.js"></script> перед тем <script> var app = angular.module('confusionApp',[]); ....

+0

Я сделал это. Теперь я получаю пустую веб-страницу. – CrazySynthax

+0

проверьте консоль, чтобы узнать, что произойдет. – Qianyue

0

Переместить это в голову.

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

Спасибо всем, и особенно @Dygen.

Правильный код:

<!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> 

Выводы: 1. Там нет необходимости загружать angular.min.js в блоке заголовка. 2. Тем не менее, angular.min.js необходимо загрузить перед линией «угловой.module». 3. переменные внутри contoller должны быть объявлены этим.varname.

Смежные вопросы