用angular js几乎可以分页任何东西，实例化模块失败错误

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

本文关键字：实例化 模块 错误 失败 任何东 分页 js angular      更新时间：2023-09-26

我正试图在我的Angular Js应用程序中添加一个分页Angular Js模块，该模块在此链接(http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs)中介绍，该模块与如何在AngularJS中进行分页?

按照这些步骤，我已经将模块的javascript文件包含到index.html中，并将模块的依赖项添加到我的模块声明中。我是angularJS的新手，我相信我一定错过了一些基本的东西。错误是: 
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');
            });
        }
    });
});

问题是模块声明，依赖项需要在一个数组中传递，而不是像我那样在两个数组中传递。

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

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

Michael Bromley在http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs#comment-2122947706的回答

相关文章：