Search code examples
javascriptangularjspaginationangularjs-controller

Angular App doesn't work when injecting a pagination dependency

I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. When I try to inject the pagination directive, the application doesn't work, where it shows only the navigation bar. I've followed this tutorial.

Moreover, the console doesn't show any error. Below are the files where I'm trying to implement the pagination:

main.html:

<div class="page-header">
    <h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
    <table class="table striped">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Created At</th>
                <!--<th>Status</th>-->
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
                <td>{{user.last_name}}</td>
                <td>{{user.first_name}}</td>
                <td>{{user.created_at}}</td>
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>

main.js:

angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);

UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];

function UsersList($scope, userDataFactory){
    $scope.users = [];
    $scope.currentPage = 1;
    $scope.pageSize = 10;

    // Get the list of users
    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}

user-data-factory.js:

angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);

function userDataFactory($http) {
    return {
        userList: userList
    };

    function userList() {
        return $http.get("users.json").then(complete).catch(failed);
    }

    function complete(response) {
        return response;
    }

    function failed(error) {
        console.log(error.statusText);
    }
}

dir-paginate is declared in the file below:

<html ng-app="Js-Users-App">

<head>
    <meta charset="utf-8">
    <title>Js Users</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

</head>
<body>
    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#/" class="brand-logo">Js Users</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#/add">Add</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="#/add">Add</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        <div ng-view></div>
    </div>



    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
    <!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
    <script src="js/dirPagination.js"></script>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/main/main.js"></script>
    <script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>

</body>
</html>

And the script is located inside the js folder. The application is running on a simple web server, started with python -m SimpleHTTPServer. I can't find the problem. Also because I still don't know how to debug very well. Is it because the application is not loading the new directive? Thanks.

UPDATE 1
I've made a plunk to show you the project structure and the entire code: http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD

Solution

  • ng-app shouldn't be defined on <html> element, unless proven otherwise. This can result in undesirable behaviour when jQuery is loaded.

    jQuery should be loaded before Angular and other dependencies that may use of it (Materialize).

    Js-Users-App module is being redefined:

    angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);

    This eliminates router configuration, so the application does nothing. The module should be defined once, with all module dependencies:

    angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])

    After that angular.module("Js-Users-App") should be used only as a getter (no second argument).

    UsersList controller injects angularUtils.directives.dirPagination for no good reason, this will result in error because there's no such service - it's a directive. It should be omitted.