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？

Python word_tokenize 化
我是 python 的新手。我试图找到我的文本的频率分布。这是代码， import nltk nltk.download() import os os.getcwd() text_file=open(
安卓 fragment 化
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义，比如 Android fragmentation re
wordpress - Docker 化 WordPress
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器，一个用于数据库(bbdd)，另一个用于wordpress文件(wordpress): sudo docker
javascript - 了解页面是否被 iframe 化
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
php - 如何 docker 化
我正在玩小型服务器，试图对运行在其上的服务进行docker化。为简化起见，假设我必须主要处理:Wordpress和另一项服务。在Docker集线器上有许多用于Wordpress的图像，但是它们似乎都
jquery - 如何使我的新注册设计表单实现 AJAX 化？
我想要发生的是，当帐户成功创建后，提交的表单应该消失，并且应该出现一条消息(取决于注册的状态)。如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是，那么他们应该会看到一条适当
c# - 添加元数据以对客户进行 strip 化
就是这样，我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式，但是我只有最后一部分告诉我用户购买了哪个包。我试着看这里: Plans to stripe 代码在这
java - 是否可以出于测试目的将类包私有(private)化
我有一个类将执行一些复杂的操作，涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
java - 使用自定义打包类型对遗留项目进行 Maven 化
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。我有一些不应更改的旧 E
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
html - 包含号码的OL strip 化
我的 html 中有一个 ol 列表，上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始？我已经包含了正在发生的事情的片段 h4:nth-child(even) {
html - 主菜单 html 化
如何仅使用 css 将附加图像 html 化？如果用纯 css 做不到，那我怎么能至少用一个图像来做最佳答案这不是真正的问题，而是您希望我们为您编写代码。我建议您搜索“css breadcrum
java - 锁拆分与锁 strip 化
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
http - REST 化 URL
在这里工作时，我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的，但很多不是。例如，我们要求所有请求都指定一个 GUID 来标
c - 如何对像素数据进行位 strip 化？
我有 3 个缓冲区，其中包含在 32 位处理器上运行的 R、G、B 位数据。我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
javascript - 需要帮助了解如何对网站进行 ajax 化
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
spring - Camel 化 Spring 启动应用程序
我们有一个 Spring Boot 应用程序，由于集成需要，它变得越来越复杂——比如在你这样做之后发送一封电子邮件，或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时，我遇到了 apa
android - 指定Google Pay token 化
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。我所拥有的是google console帐户，不知道在哪里可以找到此信息。 priva
azure - AWVERIFY 未进行属性(property)化
昨天下午 3 点左右，我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时，Azure 仍然不允许我添加域，所以我赌了一把，将域和 www 子域重新指
elasticsearch - Elasticsearch Facet token 化
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在，我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm

首页

博学

6Ren·AI

商城

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

HTML(INDEX.HTML)

JAVASCRIPT (APP.JS)