Javascript 尝试使用角度网格化时出现角度注入器错误

我有一个问题

我试图以与类似的方式使用angular gridify，但我得到一个$injector错误，如下所示。假设这就是问题所在，我应该如何注入角度gridify依赖项

Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

HTML:

JavaScript:

var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']).config(function() {});
testApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'testCtrl'
    })
});
testApp.controller('testCtrl', function($scope) {
    $scope.tiles = [];

    $scope.generateTiles = function() {
        for (var i = 0; i < 50; i++) {
            var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
            $scope.tiles[i] = {
                ratio: ratio,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
            };

        }
    };

    $scope.generateTiles();
});

var testApp=angular.module（'testApp'，['ngRoute'，'angular gridify']）.config（function（）{}）；
testApp.config（函数（$routeProvider，$locationProvider）{
$routeProvider.when（“/”{
控制器：“testCtrl”
})
});
testApp.controller（'testCtrl'，函数（$scope）{
$scope.tiles=[]；
$scope.generateTiles=函数（）{
对于（变量i=0；i<50；i++）{
var比率=数学随机（）>0.6？0.661:1.511；
$scope.tiles[i]={
比率:比率,，
颜色：'#'+（'000000'+Math.floor（Math.random（）*16777215.toString（16））.slice（-6）
};
}
};
$scope.generateTiles（）；
});

在js中注册了testCtrl控制器，而不是ExampleCtrl控制器在js中注册了testCtrl控制器，而不是ExampleCtrl

我有时也很难用JSFIDLE运行角度应用程序。我把你的代码修改了一点，放进了代码笔：

JS:

这就是你要找的吗

编辑：

---

请记住包含对angular gridify和angular route的引用。

我有时也很难让angular应用程序运行在JSFIDLE上。我把你的代码修改了一点，放进了代码笔：

JS:

这就是你要找的吗

编辑：

---

请记住包括对angular gridify和angular route的引用。

Oops.在小提琴上更改了它，但没有将其更新为testApp。它现在应该反映了这一点，我仍然收到相同的错误。Oops.在小提琴上更改了它，但没有将其更新为testApp。它现在应该反映了这一点，我仍然得到同样的错误。没有css指定高度和宽度。该模块的部分功能是设置对齐的属性，以便对不同大小的图像正确进行对齐，而无需css指定高度和宽度。该模块的部分功能是设置这些属性，以便对不同大小的图像正确进行对齐。

var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']).config(function() {});
testApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'testCtrl'
    })
});
testApp.controller('testCtrl', function($scope) {
    $scope.tiles = [];

    $scope.generateTiles = function() {
        for (var i = 0; i < 50; i++) {
            var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
            $scope.tiles[i] = {
                ratio: ratio,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
            };

        }
    };

    $scope.generateTiles();
});

var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']);
testApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'testCtrl'
    })
});
testApp.controller('testCtrl', function($scope) {
    $scope.tiles = [];

    $scope.generateTiles = function() {
        for (var i = 0; i < 50; i++) {
            var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
            $scope.tiles[i] = {
                ratio: ratio,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
            };

        }
    };

    $scope.generateTiles();
});

<div ng-app="testApp" ng-controller="testCtrl">
  <div class="gridify" ng-gridify="{wrapperSelector: '.wrapper', tileSelector: '.tile', perRow: 5, averageRatio: 1.5, gutter: 10, watch: 'tiles'}">
      <div class="wrapper">
          <div ng-repeat="tile in tiles" class="tile" data-ratio="{{tile.ratio}}" style="background-color: {{tile.color}}">
          </div>
      </div>
  </div>
</div>

body {
    margin: 0;
    padding: 10px;
}
.tile {
    width: 32px;
    height: 32px;
}
.tile > img {
    width: 100%;
    height: 100%;
}