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注入到您的控制器中。