Angular JS：无法实例化模块测试，因为：

Question

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

这里是我的javascript我的HTML文件中：

//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-重复：

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

Answer 1

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

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

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

Answer 2

您应该将database移动到您的'MainCtrl'控制器中。或者，在一个完美的世界中，您可以将该逻辑抽象为一个单独的工厂/服务，并将THAT注入到您的控制器中。