Question

大家，我是Angular Js的新手。我只是尝试运行此代码，它出现了一个问题，“angular.js：38Uncaught Error：[$ injector：modulerr]。” 我找不到它的问题。你能帮我吗？非常感谢。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<!--The	ngApp (ng-app)	directive	is	applied	to
specify	the	root	of	the	application-->
<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">
        <!--The	ngInit (ng-init)	directive	is	used	to
            – Evaluate	an	expression
            – Initialize	a	JavaScript	variable-->
        <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"> <!--dishes is the array, dish is used by the following expression-->
                        <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}}</h2>
                            <span class="label label-danger">{{dish.label}}</span>
                            <span class="badge">{{dish.price | currency}}</span>
                            <p>{{dish.description}}</p>
                            <p>Comment: {{dish.comment}}</p>
                            <p>Type your comment:
                                <!--The	ngModel directive	binds	the	input	value	to	a	variable	within	the	scope-->
                                <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",[]); //此处module名字和ng-App处是同一个名字
        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: ''
                }
            ];
            this.dishes = dishes;
        });
    </script>

</body>

</html>

Answer 1

您需要设置：

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

进入这个：

<html lang="en" ng-app="confusionAPP">

它必须与JS代码相匹配

Answer 2

您必须在html和js代码中同名模块名称。这里您的模块名称是 confusionAPP ，因此您还需要在html中编写相同的名称。

来自

的chagne行

＆LT; html lang =＆＃34; en＆＃34; NG-应用程式=＆＃34; confusionApp＆＃34;＆GT;

到

＆LT; html lang =＆＃34; en＆＃34; NG-应用程式=＆＃34; confusionAPP＆＃34;＆GT;

现在可行。

关于我的Anjular js代码的错误

2 个答案: