2

我对 AngularJS 和 HotTowel 工具链有些陌生。ag-grid的凉亭安装在 index.html 文件中放置了适当的(.css 和 .js)链接。已尝试针对不同的模块(例如应用程序、核心等)依赖于“angularGrid”,但没有成功。代码摘录如下。

在运行时,这会导致一串错误:

[$injector:modulerr] 无法实例化模块应用程序,原因是:

错误:[$injector:modulerr] 无法实例化模块 app.core,原因如下:

错误:[$injector:modulerr] 无法实例化模块 angularGrid,原因是:

错误:[$injector:nomod]模块“angularGrid”不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。

ETC。 。.

我可以看到 ag-grid 脚本和样式表文件确实在运行时包含在浏览器工具调试器中;但错误是(我认为)告诉我在尝试加载 app.core 时找不到网格模块 - 我目前已经在其中声明了依赖项。

有趣的是,如果我从 bower.json 中删除 ag-grid 依赖项(手动链接 index.html 中的关联 .css 链接)并将 ag-grid 的“angular-grid.js”文件复制到客户端应用程序结构(例如,在核心文件夹下)。但是,这种方法引发了其他问题和担忧。

此外,在我的机器上的简单 AngularJS 项目(在 HotTowel 环境之外)中,ag-grid 确实“像宣传的那样”(即,从其凉亭目录)工作。

是否有一个使用 ag-grid 的简单 HotTowel 项目?或者您能否就如何正确解决这种情况提供建议?


HotTowel 项目的节选。. .

来自 core.module.js:

(function () {
    'use strict';

    angular
        .module('app.core', [
            'ngAnimate', 'ngSanitize',
            'blocks.exception', 'blocks.logger', 'blocks.router',
            'angularGrid',
            'ui.router',
            'ngplus'
        ]);
})();

来自 index.html:

<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/ag-grid/dist/angular-grid.css" />
<link rel="stylesheet" href="/bower_components/ag-grid/dist/theme-fresh.css" />
<link rel="stylesheet" href="/bower_components/ag-grid/dist/theme-dark.css" />
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="/bower_components/toastr/toastr.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<!-- endbower -->
     


在后台 - 作为“成功发布构建”的快速路径(即,HotTowel 中的 gulp 构建) - 我暂时(直到我能弄清楚如何解决 Karma 配置以支持 ag-grid)修改了 John Papa 的 gulp 文件:

gulp.task('test', ['vet', 'templatecache'], function (done) {
    //startTests(true /*singleRun*/ , done);
    badKarma(true /*phantomjs1xIssue*/ , done);
});

gulp.task('autotest', function(done) {
    //startTests(false /*singleRun*/ , done);
    badKarma(true /*phantomjs1xIssue*/ , done);
});

 /**
 * Can't use Angular Grid with Phantomjs 1.9.x.
 * The problem is supposed to be fixed in Phantomjs 2.0. - not yet supported in npm or VS2015.
 * See: http://angulargrid.com/forum/showthread.php?tid=2516&highlight=stopDragging
 */
function badKarma(phantomjs1xIssue, done) {
    done();
}

4

1 回答 1

1

这是angular-grid 和wiredep 或自动注射器的一个已知问题。Angular-grid 不依赖于 Angular,它可以原生运行。

因此,如果您使用wiredep,请使用覆盖使角度网格依赖于角度。或在角度网格之前手动包含角度

<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>
<script src="/bower_components/angular/angular.js"></script>

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/ag-grid/dist/angular-grid.js"></script>
于 2015-09-24T06:29:17.317 回答