javascript - 使用 Angular js 对几乎所有内容进行分页，无法实例化模块错误-6ren

javascript - 使用 Angular js 对几乎所有内容进行分页，无法实例化模块错误

转载作者：行者123 更新时间：2023-12-03 09:37:51

26

4

我正在尝试向我的 Angular Js 应用程序添加此链接( http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs )中包含的分页 Angular JS 模块，该模块与 How to do paging in 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 中回答

关于javascript - 使用 Angular js 对几乎所有内容进行分页，无法实例化模块错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31273253/

26

4

0

文章推荐： javascript - Eureca.io启动: Where is eureca. js？

c - (几乎)用于开关的非冲突简单哈希函数
我正在用 C 写一个高级计算器。正如你所猜到的，它目前有很多函数，我使用一个开关来对每个函数名进行适当的操作。它是这样的: switch(hash_of(function_name_currently
c# - (几乎)所有垃圾收集都是完全收集
在大约四天的时间里，我一直在收集托管应用程序的性能计数器。在此期间，发生了以下垃圾回收: 第 0 代:133,695 第一代:133,413 第 2 代:133,254 其中一些是使用GC.Colle
Mysql - 跨表排除有效..几乎
我构建了这个: [ Workshop_templates 表 ] id_template | Workshop_name 1 | Conflict resolution 2 | Building tr
python - (几乎)从列表中均匀选择项目
我有一个 N 的列表元素，我想抽样 M ( N/2 . IE。当超过一半的值被采样时。但它非常适合 M N/2 时反转问题。 : 注意:这实际上是创建一个大小为 N 的屏蔽列表对于 M 是 Fals
c - 显示相同输入的不同输出(几乎)
伙计们，我是竞争性编程的新手，我遇到了一个小问题在提供输入的同时在问题中，顶点数从 1 到 n但是我编写程序时考虑到节点是从 0 开始的但是当我通过从每个边的每个顶点减少 1 来输入测试用例时，我的
sql - 如何以特定顺序选择(几乎)唯一值
在一次旅行中，有多个停靠点，(一个停靠点 = 一个或多个订单加载或交付的地址)，按特定顺序排列。例如: Trip A Trip_order Action Place Ord
architecture - 出于项目推荐目的在微服务之间共享(几乎)相同的数据是否是个坏主意
我有一个关于由微服务组成的应用程序架构的问题。我的微服务很少，但在这个问题的上下文中有趣的是: 人力资源 - 这里存储了所有用户数据，如用户名、性别、用户体验等。工作机会 - 这里存储了每个招聘广
r - 存储(几乎)列表中工作区中的所有对象
假设我的工作空间(全局环境)中有许多对象，并且我想将大多数对象存储在列表中。这是一个简化的示例: # Put some objects in the workspace A <- 1 B <- 2 C
Firebase 服务器时间戳与本地(几乎)相同
当我获得与本地时间相同的时间戳时，firebase 生成的服务器时间戳是否会自动转换为本地时间，或者我错过了什么？ _firestore.collection("9213903123").docume
javascript - 如何将未知整数划分为给定数量的(几乎)偶数
我需要帮助才能将未知整数分成给定数量的偶数部分——或者至少尽可能地均匀。各部分之和应为原值，但各部分应为整数，且应尽可能接近。参数 num: Integer - 应该被分成相等部分的数字 parts
Java JScrollPane 滚动到底部......几乎
我的 Java 程序中有一个带有 JPanel 的 ScrollPane，它附加了大量文本。我需要 ScrollPane 在每次添加后滚动到最底部。我对以下代码的问题是它“几乎”滚动到底部但不是一直滚
python - 如何测试两个稀疏数组是否(几乎)相等？
我想检查两个稀疏数组是否(几乎)相等。而对于 numpy 数组，你可以这样做: import numpy as np a = np.ones(200) np.testing.assert_array_
javascript - 合并多个(几乎)重复的每个语句
我有以下一组几乎相同的 each 语句。我需要添加大约 20 个遵循类似模式的内容。我正在尝试找出如何获取小变量并将它们更新为单个语句(而不是 20 次相同但略有不同的内容)。 $.each(main
python - 获取两个字典中(几乎)匹配的键的值并将它们连接起来
所以我想获取两个字典中(几乎)匹配的键的值并将它们连接起来。我尝试过: dict3 = {key:dict1[key].strip() for key in dict2.keys() if key.p
mysql - 选择(几乎)重复的行
我的表看起来像这样: | id (int) | sentence (varchar) | 我想找到除了一个特定单词之外几乎相同的所有行。例如: | 230 | test | | 321 | test
c# - 如何正确封装对具有(几乎)相同模式的不同数据库系统的访问？
起始情况:MS SQL 中有一个现有的数据库模式，它与 MySQL 中的现有模式完全相同(数据库优先 - 无法更改，因为已广泛安装)。但是，它们在用于相应列的数据类型方面可能略有不同。该数据库系统必须
javascript - (几乎)总是在闭包中定义 Polymer？
对于复杂的元素，一个很好的做法是(几乎)总是在闭包中定义 Polymer 以保持所有只应在内部修改的变量和方法私有(private)，而不是将它们附加到元素(例如 'this ')? 喜欢以下内容:
java - (几乎)相同的代码在一个地方产生未经检查的分配，而在另一个地方则不会
我正在解析 Java 中的 RestAssured 调用，该调用返回对象列表。如果我使用此代码，Idea 会生成未经检查的分配警告: List availableInventories = ListP
css - 文本在(几乎)相同操作系统的相同浏览器中的位置不同
我真的被难住了。我所拥有的是一个样式化为矩形的 div，其中包含作为页面主要标题的文本。相关代码如下: HTML: SIN CSS: h1 { text-align:right
javascript - 选择(几乎)元素旁边的文本
我需要将单选按钮及其旁边的文本包装在标签中，只是为了更加用户友好。几天前我遇到了类似的问题，我有一个复选框，并且在我有一个 span 元素之后立即出现。我可以包装这两个元素。我有这个 HTML:

首页

博学

6Ren·AI

商城

javascript - 使用 Angular js 对几乎所有内容进行分页，无法实例化模块错误

HTML(INDEX.HTML)

JAVASCRIPT (APP.JS)