CODEWITHSUNDEEP
javascripthtml
secuaz
secuaz

Reputation: 479

Paginate almost anything with angular js, Failed to instantiate module error

I am trying to add to my Angular Js application a pagination angular JS module covered in this link (http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs), which is connected with How to do paging in AngularJS?.

Following the steps I have included the module's javascript file to index.html and added the module's dependency to my module's declaration. I am new to angularJS and I am sure I must be missing something basic. The error is:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.2.9/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
    at http://127.0.0.1/sessions-angularJs-...

HTML (INDEX.HTML)

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>  
  <link rel="stylesheet" href="css/taskman.css"/>
    <script src="lib/angular/angular.js"></script>

    <script src="js/app.js"></script>
     <script src="lib/angular/angular-route.js"></script>  
    <script src="lib/angular/dirPagination.js"></script>  
    <script src="js/directives/loginDrc.js"></script>
    <script src="js/services/loginService.js"></script>
    <script src="js/controllers/priceCtrl.js"></script>    
    <script src="js/services/sessionService.js"></script>
    <script src="js/controllers/loginCtrl.js"></script>
    <script src="js/controllers/homeCtrl.js"></script>
    <script src="js/controllers/campCtrl.js"></script>
    <script src="js/controllers/quizCtrl.js"></script>
    <script src="js/controllers/voucherCtrl.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
  <body>
    <div class="navbar navbar-default" id="navbar">
      <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="/">Campaigning Framework</a>
          </div>
          <ul class="nav navbar-nav navbar-right" ng-controller="homeCtrl">
             <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
             <li><a href="#voucher"><i class="fa fa-comment"></i> Vouchers</a></li>
             <li><a href="#campaign"><i class="fa fa-shield"></i> Campaign</a></li>
             <li><a href="#quiz"><i class="fa fa-shield"></i> Quiz</a></li>
             <li><a href="#price"><i class="fa fa-shield"></i> Prize</a></li>             
             <li><a href="" ng-click="logout()"><i class="fa fa-comment"></i> Logout</a></li>
          </ul>
      </div>    
    </div>
    <div ng-view>

    </div>

    <!-- In production use:
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    -->



  </body>
</html>

JAVASCRIPT (APP.JS)

'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute'], ['angularUtils.directives.dirPagination']);
//var app= angular.module('myApp', ['ngRoute'], ['angularUtils.directives.dirPagination']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
  $routeProvider.when('/voucher', {templateUrl: 'partials/voucher.html', controller: 'voucherCtrl'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'});
  $routeProvider.when('/campaign', {templateUrl: 'partials/campaign.html', controller: 'campCtrl'});
  $routeProvider.when('/quiz', {templateUrl: 'partials/quiz.html', controller: 'quizCtrl'});
  $routeProvider.when('/price', {templateUrl: 'partials/price.html', controller: 'priceCtrl'});
  $routeProvider.otherwise({redirectTo: '/login'});
}]);
app.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i=1 ; i<=total; i++)
      if(i %10 == 0){
      input.push(i);
      }
    return input;
  };
});


app.run(function($rootScope, $location, loginService){
    var routespermission=['/home', '/campaign', '/quiz', '/price', '/voucher'];  //route that require login
    $rootScope.$on('$routeChangeStart', function(){
        if( routespermission.indexOf($location.path()) !=-1)
        {
            var connected=loginService.islogged();
            connected.then(function(msg){
                if(!msg.data) $location.path('/login');
            });
        }
    });
});

Upvotes: 0

Views: 848

Answers (1)

secuaz
secuaz

Reputation: 479

The problem was the module declaration, the dependencies needed to be passed in one array and not in two as I did.

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

Should be:

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

Answered by Michael Bromley in http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs#comment-2122947706

Upvotes: 1

Related Questions