Angular.js问题：未捕获的错误：[$ injector：modulerr]

时间：2020-04-10 13:03:14

标签： angularjs

大家好，我正在尝试学习Angular.js的视频课程，我在html标签上添加了ng-app，在体内使用了ng-controller来使用控制器，但是我看到了所有的{{elements}}。 （如果我删除了ng-controller，则输入字段工作正常，但是当我尝试添加ng-controller时，就会出现问题...在以下代码中，我应该只显示作者列表

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title>AngularJS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="lib/js/app.js"></script>

</head>
<body class="bg-secondary" ng-controller="MyController">
   <div class="container mt-sm-3">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6 card">
          <div class="card-body">
            <h2 class="card-title text-dark">Directory degli Artisti</h2>

              <div class="form-row mb-2">
                <div class="col">
                  <label class="col-form-label text-right" for="searchQuery">search {{' for: ' + query}}</label>
                </div><!-- label -->

                <div class="col-12">
                  <input  class="form-control form-control-lg" id="searchQuery" placeholder="Search for artists" autofocus ng-model="query">
                </div><!-- col-12 -->
              </div><!-- form-row -->

          </div><!-- card-body -->
      </div><!-- col-12 -->
    </div><!-- row -->
</div><!-- col-container -->

<div class="artist-list container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-9 col-md-7 col-lg-5">
        <ul class=" list-group d-flex">
          <li class="list-group-item">

              <div class="media d-flex align-items-center">
                <img class="rounded-circle mr-3"
                  src="images/{{artist.shortname}}_tn.jpg"
                  alt="Photo of {{artist.name}}">
                <div class="media-body">
                  <h5 class="my-0 text-dark">{{artist.name}} </h5>
                  <div class="text-secondary font-italic">{{artist.study}}</div>
                </div><!-- media-body -->
              </div><!-- media -->

          </li>
        </ul>
      </div><!-- col-12 -->
    </div><!-- row -->
  </div><!-- col-container -->

</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>

app.js文件包含作者列表（在我的示例中只有一个）：

var myApp = angular.module('MyApp', []); // no dipendenze []

myApp.controller('MyController', function MyController($scope) {

   $scope.artist = {
      "name":"Emilio Alfieri",
      "shortname":"Draco",
      "study":"Ing. Informatica",
      "bio":"Nato a Roma il 7/05/1987, si è sposato il 19 Agosto 2020 in Indonesia.Adora la chitarra e i computers."
   }
 }); //$scope è come una variabile globale

我收到以下错误：未捕获的错误：[$ injector：modulerr] 我真的按照视频中看到的所有说明进行操作。我怎么了？

非常感谢您！

    --

1 个答案:

答案 0 :(得分：0)

您犯了模块名称的拼写错误。

替换var myApp = angular.module('myApp', []);

而不是 var myApp = angular.module('MyApp', []); 

var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope) {
   $scope.artist = {
      "name":"Emilio Alfieri",
      "shortname":"Draco",
      "study":"Ing. Informatica",
      "bio":"Nato a Roma il 7/05/1987, si è sposato il 19 Agosto 2020 in Indonesia.Adora la chitarra e i computers."
   }
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title>AngularJS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body  class="bg-secondary" ng-controller="MyController">
   <div class="container mt-sm-3">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6 card">
          <div class="card-body">
            <h2 class="card-title text-dark">Directory degli Artisti</h2>

              <div class="form-row mb-2">
                <div class="col">
                  <label class="col-form-label text-right" for="searchQuery">search {{' for: ' + query}}</label>
                </div><!-- label -->

                <div class="col-12">
                  <input  class="form-control form-control-lg" id="searchQuery" placeholder="Search for artists" autofocus ng-model="query">
                </div><!-- col-12 -->
              </div><!-- form-row -->

          </div><!-- card-body -->
      </div><!-- col-12 -->
    </div><!-- row -->
</div><!-- col-container -->

<div class="artist-list container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-9 col-md-7 col-lg-5">
        <ul class=" list-group d-flex">
          <li class="list-group-item">

              <div class="media d-flex align-items-center">
                <img class="rounded-circle mr-3"
                  src="images/{{artist.shortname}}_tn.jpg"
                  alt="Photo of {{artist.name}}">
                <div class="media-body">
                  <h5 class="my-0 text-dark">{{artist.name}} </h5>
                  <div class="text-secondary font-italic">{{artist.study}}</div>
                </div><!-- media-body -->
              </div><!-- media -->

          </li>
        </ul>
      </div><!-- col-12 -->
    </div><!-- row -->
  </div><!-- col-container -->

</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>

相关问题
最新问题