Question

我是AngularJS的新手，试图熟悉这个框架。

我收到两个错误（可能是未加载模块的结果）：

无法实例化模块应用
模块'app'不可用！

我已经看过了，我没有拼错任何东西。我不知道为什么我不工作。经过几个小时，这可能是一个简单的问题。

// guessingGameController.js

var app = angular.module('app');

function GuessingGameController($scope) {
  $scope.varifyGuess = function() {
    $scope.deviation = $scope.deviation - $scope.guess;
    $scope.numOfGuesses = $scope.numOfGuesses + 1;
  };

  $scope.initializeGame = function() {
    $scope.guess = null;
    $scope.randNum = Math.floor((Math.random(1000) + 1));
    $scope.deviation = null;
    $scope.numOfGuesses = null;
  };
  app.controller('GuessingGame', GuessingGameController);
}

// app.js - create module "app"

var app=angular.module('app', []);

<!doctype html>
<html>

<head>
  <script src="../node_modules/angular/angular.js"></script>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/
       3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="app.js"></script>
  <script src="js/controllers/guessingGameController.js"></script>
</head>

<body ng-app="app">
  <div class="container" ng-controller="GuessingGame">
    <h2>Guess the Number !</h2>
    <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
    <label>Your Guess: </label><input type="number" ng-model="guess" />
    <button ng-click="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
    <button ng-click="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
    <p>
      <p ng-show="deviation<0" class="alert alert-warning">Your guess is higher.</p>
      <p ng-show="deviation>0" class="alert alert-warning">Your guess is lower.</p>
      <p ng-show="deviation===0" class="alert alert-success">Yes! That"s it.</p>
    </p>
    <p class="text-info">No of guesses : <span class="badge">{{noOfTries}}</span>
      <p>
  </div>

</body>

</html>

Answer 1

有两种方法可以使用angular.module，使用1或2个参数。

这引用了一个名为＆＃34; app＆＃34;的模块。应该存在，并返回如果它：

var app = angular.module('app');

这将创建一个名为＆＃34; app＆＃34;的模块。并在成功时返回：

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

第二个参数（数组）可以包含新模块所依赖的其他模块的列表。

在您的代码中，第一行尝试访问尚不存在的模块，并且您收到错误。

＆＃13;

var app = angular.module('app', []);

function GuessingGameController($scope) {
  $scope.numOfGuesses = 0;
  $scope.verifyGuess = function() {
    console.log($scope.deviation, $scope.guess)
    $scope.deviation = $scope.deviation - $scope.guess;
    $scope.numOfGuesses = $scope.numOfGuesses + 1;
  };

  $scope.initializeGame = function() {
    $scope.guess = null;
    $scope.randNum = Math.floor((Math.random(1000) + 1));
    console.log($scope.randNum);
    $scope.deviation = null;
    $scope.numOfGuesses = null;
  };

}

  app.controller('GuessingGame', GuessingGameController);

＆＃13;

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>


<body ng-app="app">
  <div class="container" ng-controller="GuessingGame">
    <h2>Guess the Number !</h2>
    <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
    <label>Your Guess: </label><input type="number" ng-model="guess" />
    <button ng-click="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
    <button ng-click="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
    <div>
      <p ng-show="deviation<0" class="alert alert-warning">Your guess is higher.</p>
      <p ng-show="deviation>0" class="alert alert-warning">Your guess is lower.</p>
      <p ng-show="deviation===0" class="alert alert-success">Yes! That"s it.</p>
    </div>
    <p class="text-info">No of guesses : <span class="badge">{{numOfGuesses}}</span>
      </p>
  </div>

</body>

＆＃13;

错误（模块'app'不可用！）

1 个答案: