AngularJS Error: [$injector:modulerr]

Question

我在节点项目的 /public/javascripts 目录中有以下 angular 代码：

var app = angular.module('userContent', ['angularUtils.directives.dirPagination']);

app.controller('MainCtrl', [
'$scope',
  function($scope){
    $scope.users = []

    $scope.addUser = function(){

      if(!$scope.user || $scope.user === '') { return; }
      $scope.users.push({
        user: $scope.user,
        vertrag: $scope.vertrag,
      });

    $scope.user = '';
    $scope.vertrag = '';
    };
  }
]);

这是我的 html 模板，它在我的节点项目 /views 目录中

<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="/javascripts/app.js"></script>
  </head>

  <body ng-app="userContent" ng-controller="MainCtrl">

    <input ng-model="search">

    <table border="1">

      <th>user</th>
      <th>vertrag</th>

      <tr dir-paginate="u in users | filter:search | itemsPerPage: 4">
        <td>{{ u.user }}</td>
        <td>{{ u.vertrag }}</td>
      </tr>

    </table>

    <dir-pagination-controls></dir-pagination-controls>

    <form ng-submit="addUser()">

      <input type="text"
      placeholder="Benutzer"
      ng-model="user">
      </input> <br>

      <input type="text"
      placeholder="Vertrag"
      ng-model="vertrag">
      </input> <br>

      <button type="submit">Submit</button>

    </form>

  </body>

</html>

我安装了 following plugin 和 bower，我想使用它。但我总是得到这个错误：

Error: [$injector:modulerr]

我的文件路径：

/home/ubuntu/project/views/index.ejs
/home/ubuntu/project/public/javascripts/app.js
/home/ubuntu/project/bower_components/angular-utils-pagination
/home/ubuntu/project/bower_components/angular-utils-pagination/dirPagination.js
/home/ubuntu/project/bower_components/angular-utils-pagination/dirPagination.tpl.html
/home/ubuntu/project/bower_components/angular-utils-pagination/bower.json

Answer 1

使用 Bower 安装并不意味着您已准备就绪，它只是下载内容。

当 Angular 应用找不到给定模块时，您会收到该错误，在您的情况下 angularUtils.directives.dirPagination。

您必须在 html 中的 app.js 之前添加定义 angularUtils.directives.dirPagination 模块的 js。

Answer 2

如果您不在页面中包含文件，您将收到此错误。您忘记在 html 中包含 dirPagination 的文件，因此它在应用程序中不可用并给出模块错误。

Answer 3

Cem Özer 对下一步的看法是正确的（但未详细说明），但是在使用 bower install [name] 时，请务必将 --save 添加到末尾，否则它不会保存更改。如果你在没有它的情况下构建，很可能会丢弃包。

示例：

bower install angular-utils-pagination --save --save 据我所知也适用于 npm

完成此操作后，您需要将 js 文件和 tpl 文件添加到 app.js 文件中（如果遵循最佳实践）。引用这些文件后，您可以添加 angularUtils.directives.dirPagination

示例：

angular.module('myApp', ['angularUtils.directives.dirPagination']);

有关下一步如何使用这个优秀工具的信息，请查看 GITHUB 存储库 here。

如果您对此还有其他疑问，请随时发表评论，我会为您的回答添加更多细节。

AngularJS Error: [$injector:modulerr]

AngularJS Error: [$injector:modulerr]

angularjs

angularjs-module