簡體   English   中英

錯誤(模塊“應用”不可用!)

[英]Errors (Module 'app' is not available!)

我是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> 

有兩種方法可以使用帶有1或2個參數的angular.module

這引用了應該存在的名為“ app”的模塊, 如果存在,則返回該模塊:

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

這將創建一個名為“ app”的模塊,並在成功時返回它:

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

第二個參數(數組)可以包含新模塊依賴的其他模塊的列表。

在您的代碼中,第一行嘗試訪問一個尚不存在的模塊,並且您得到一個錯誤。

 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); 
 <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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM