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

Question

I'm running some Javascript inside a HTML file. And I'm trying to use some Angular JS with the function ng-repeat. Each time I run it, I get this error in the console :

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

And when I click on the link within the error message in the console, I get this:

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

Here is my Javascript inside my HTML file:

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

And finally my HTML which uses ng-repeat:

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

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

 </div>

I'm using a controller with scope to loop inside my HTML with an array. So first I don't know where my error message comes from, and second I'm not sure i'm using the controller and ng-repeat properly.

Thanks

PS: I included in the head tag of my HTML file this link :

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

EDIT: my Javascript inside my HTML updated (I moved everything inside the controller)

The error message is gone, my html just doesn't display any url (though the console shows there are 4 urls in my array photosUrl)

 <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

You should move the database into your 'MainCtrl' controller.

Or, in a perfect world, you would abstract that logic into a seperate factory/service, and inject THAT into your controller.

Answer 2

nomod is Angular's error indicating a module you've asked it to use hasn't been defined.

When you specify ng-app , AngularJS will automatically try to find the module you've defined with that name to load it into that block. But you're defining your module asynchronously, in the callback of a Firebase .once() . That callback can happen very quickly in some cases, but it's still asynchronous and won't be ready when Angular gets going here.

1. Move your angular.module() definition outside the Firebase callback.
2. Add $scope.$apply() just below setting $scope.urls = in the Firebase data callback.