角度未定义

时间:2017-01-03 11:32:42

标签: angularjs

当我在命令行终端中运行gulp时,我收到此警告。 我在HTML代码中添加了angular.js文件。我无法弄清楚问题。

HTML code:

<!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 -->
    <!--build:css styles/main.css-->
    <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">
    <!--endbuild-->
    <!-- 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="nav nav-tabs" role="tablist">
                <li role="presentation">
                    <a aria-controls="all menu" role="tab" ng-click="menuCtrl.select(1)" ng-class="{active:menuCtrl.isSelected(1)}">The Menu</a></li>

                <li role="presentation">
                    <a aria-controls="appetizer" role="tab" ng-click="menuCtrl.select(2)" ng-class="{active:menuCtrl.isSelected(2)}">Appetizers</a></li>

                <li role="presentation">
                    <a aria-controls="mains" role="tab" ng-click="menuCtrl.select(3)" ng-class="{active:menuCtrl.isSelected(3)}">Mains</a></li>

                <li role="presentation">
                    <a aria-controls="desserts" role="tab" ng-click="menuCtrl.select(4)" ng-class="{active:menuCtrl.isSelected(4)}">Desserts</a></li>


                </ul>

                <div class="tab-content">
                <ul class="media-list tab-pane fade in active"> 
                <li class="media" ng-repeat="dish in menuCtrl.dishes | filter:menuCtrl.filtText">
                  <div class="media-left media-middle">
                    <a href="#"><img ng-src={{dish.image}} class="media-object img-thumbnail" alt="Uthappizza"></a>
                    </div>
                  <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}</h2>
                      <span class="label label-danger label-xs">{{dish.label}}</span>
                      <span class="badge">{{dish.price | currency}}</span>
                      <p>{{dish.description}}</p>

                  </div>

                </li>
            </ul>
                    </div>
            </div>
        </div>
    </div>

    <!--build:js scripts/main.js-->
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    <!--endbuild-->


</body>

</html>`

app.js文件如下:

/*jslint node: true */
'use strict';

angular.module('confusionApp',[])

        .controller('menuController',function(){

                                       this.tab=1;
                                       this.filtText="";


                                        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: ''

                                              }
                                              ];
                                   this.dishes=dishes;


                                    this.select=function(settab){

                                        this.tab=settab;

                                        if(settab===2){
                                            this.filtText="appetizer";
                                        }
                                        else if(settab===3){
                                            this.filtText="mains";
                                        }
                                        else if(settab===4){
                                            this.filtText="dessert";
                                        }
                                        else{
                                            this.filtText="";
                                        }
                                    };

                                    this.isSelected=function(checktab){

                                        return(this.tab===checktab);
                                    };



        });

`

this is the error when I run gulp in command line prompt

4 个答案:

答案 0 :(得分:0)

将AngularJs文件从BODY移到HEAD标记内。它会正常工作。

答案 1 :(得分:0)

Yor错误显示在第5行,但您的原始文件显示角度引用 一些不同的路线。

(i)再次尝试重新运行应用程序。

(ii)如果正确加载了角度参考,请检查chrome中的网络选项卡。

如果没有将路径更改为正确路径并再次进行测试。

答案 2 :(得分:0)

我在app.js文件中删除'use strict'之后尝试过,它对我有用。

答案 3 :(得分:-1)

Angular需要jQuery,可能想要包括那个,例如..

<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>

确保在包含Angular文件之前包含它