Angular JS：无法实例化模块测试，原因是：答案

【问题标题】：Angular JS : Failed to instantiate module test due to:Angular JS：无法实例化模块测试，原因是：
【发布时间】：2017-07-09 05:05:29
【问题描述】：

我正在一个 HTML 文件中运行一些 Javascript。我正在尝试使用一些带有 ng-repeat 功能的 Angular JS。每次运行它时，我都会在控制台中收到此错误：

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

当我点击控制台中错误消息中的链接时，我得到了这个：

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

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

<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 标签中包含了这个链接：

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

编辑：我的 HTML 中的 Javascript 已更新（我移动了控制器内的所有内容）

错误消息消失了，我的 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>

【问题讨论】：

photosUrl 在角度范围内未定义。尝试在angular的模块范围内编写所有js，而不是在脚本标签中写不同

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

或者，在一个完美的世界中，您可以将该逻辑抽象为一个单独的工厂/服务，然后将其注入您的控制器。

【讨论】：