Angular JS：由于以下原因无法实例化模块测试：

Question

我正在运行在 HTML 文件中添加一些 Javascript。我正在尝试将一些 Angular JS 与函数 ng-repeat 一起使用。每次我运行它，我都会在控制台中收到此错误：

angular.js:38 Uncaught Error: [$injector:modulerr]

当我在控制台的错误消息中单击 link 时，我得到了这个：

Failed to instantiate module test due to: Error: [$injector:nomod] http://errors.angularjs.org/1.6.4/$injector/nomod?p0=test at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:6:425 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:26:270 at b (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:25:299) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:26:44 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:42:117 at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:7:495) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:41:476) at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:46:44) at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:21:373) at Sc (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js:22:179

这是我的 HTML 文件中的 Javascript：

//Get User ID and Trip ID in URL 

function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam)
    {
        return sParameterName[1];
    }
}
}

 var userid = GetURLParameter('userid');
 var tripid = GetURLParameter('tripid');

  </script>

<script>

 //Get photos URL inside a particular Trip ID from a User ID

  var database = firebase.database();
  database.ref(`photos/${userid}/trips/${tripid}`).once('value') // 
  will return you all the photo objects inside the `tripId`
  .then(photosSnap => {
  var photosObj = photosSnap.val();
  var photosUrl = Object.keys(photosObj).map(key => 
  photosObj[key].photourl);
  // then you can return the array or use it here;


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

     app.controller('MainCtrl', function($scope) {
       $scope.urls = photosUrl;

   });

console.log(photosUrl); // will be an array of all the photourls
}).catch(err => alert(err));

最后是我的 HTML，它使用 ng-repeat：

<div class="spot" ng-app="test" ng-controller="MainCtrl">

     <ul>
        <li ng-repeat="url in urls">{{url}}</li>
     </ul> 

 </div>

我正在使用一个带有作用域的控制器在我的 HTML 中循环一个数组。所以首先我不知道我的错误消息来自哪里，其次我不确定我是否正确使用了控制器和 ng-repeat。

谢谢

PS：我在 HTML 文件的 head 标签中包含了这个 link :

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

编辑：我的 Javascript 在我的 HTML 更新了（我把所有东西都移到了控制器里面）

错误消息消失了，我的 html 只是没有显示任何 url（虽然控制台显示我的数组 photosUrl 中有 4 个 url）

 <script>

  //Get photos URL inside a particular Trip ID from a User ID


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

app.controller('MainCtrl', function($scope) {

    var database = firebase.database();
    database.ref(`photos/${userid}/trips/${tripid}`).once('value') // 
    will return you all the photo objects inside the `tripId`
    .then(photosSnap => {
    var photosObj = photosSnap.val();
    var photosUrl = Object.keys(photosObj).map(key => 
    photosObj[key].photourl);
    // then you can return the array or use it here;

    $scope.urls = photosUrl;

console.log(photosUrl); // will be an array of all the photourls
}).catch(err => alert(err));

     });

  </script>

Answer 1

您应该将 database 移动到您的 'MainCtrl' 控制器中。

或者，在一个完美的世界中，您可以将该逻辑抽象为一个单独的 factory/service，并将其注入到您的控制器中。

Answer 2

nomod 是 Angular 的错误，表明您要求它使用的模块尚未定义。

当您指定 ng-app 时，AngularJS 将自动尝试查找您使用该名称定义的模块以将其加载到该块中。但是你在 Firebase .once() 的回调中异步定义你的模块。在某些情况下，该回调可能会很快发生，但它仍然是异步的，并且在 Angular 开始时不会准备好。

将您的 angular.module() 定义移到 Firebase 回调之外。
在 Firebase 数据回调中的设置 $scope.urls = 下方添加 $scope.$apply()。

Angular JS：由于以下原因无法实例化模块测试：

Angular JS : Failed to instantiate module test due to:

html

javascript

angularjs

angularjs-ng-repeat