0

I have following angular code which is in my /public/javascripts dir in my node project:

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 = '';
    };
  }
]);

This is my html template which is in my /views dir in my node project

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

I installed following plugin with bower, which I want to use. But I always get this error:

Error: [$injector:modulerr]

Path to my files:

/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
Improve this question
4
  • I think u forgot to add pagination module javascript file Commented Mar 11, 2015 at 11:49
  • Can you actually list the paths of the important files? Can you show the contents of the dirPagination file? Commented Mar 11, 2015 at 11:54
  • And the dirPagination file? Need to see the contents of that Commented Mar 11, 2015 at 12:00
  • @PeterAshwell it is this one tinyurl.com/m34oayq Commented Mar 11, 2015 at 13:02

3 Answers 3

Reset to default
3

Installing with bower does not mean you are ready to go, it just downloads contents.

You get that error when Angular app cannot find given module, in you case angularUtils.directives.dirPagination.

You have to add js that defines angularUtils.directives.dirPagination module before your app.js in your html.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

<script> tag with src pointing to your js in your html head. Just before your app.js include.(also just like app.js include)
Oh my apologies. You installed dirPagination globally with bower. You can look for how to install it to project local or just copy and paste the two files mentioned in github page to your project.
After you copy related files to your project. Just include the js file in your HTML. That should do the job.
Can yolu copy them to your project's javascripts folder and include from there.
wow that already did the trick.. If you write that in your answer I will accept it :) Thank you very much for your help!
|
1

You will get this error if you do not include files in your page. You forgot to include the file for dirPagination in the html, so it is not available in the app and gives the module error.

Improve this answer

Comments

0

Cem Özer is right about the next step (however undetailed is was) however when using bower install [name] make sure to add --save to the end otherwise it will not save the changes. If you build without it will most likely discard the package.

Example:

bower install angular-utils-pagination --save --save works with npm as well to my knowledge

After you have done this then you want to add the js file and the tpl file into your app.js file (if following best practices). Once you have a reference to these files you can then add angularUtils.directives.dirPagination

Example:

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

For information on what do do next for how to use this excellent tool check out the GITHUB repository here.

If you have further questions regarding this feel free to leave a comment and I will add more detail to my answer for you.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.