Question

我有一个AngularJS应用程序，将来，其他团队的一些开发人员将开发将作为其一部分安装的模块。所以我定义了文件夹结构如下。

www/
  index.html
  app.js
  modules/
    modulesA/ -- will be copied when module A was installed
      moduleA.js
      moduleA.css
      moduleA.partial.html
    modulesB/ -- will be copied when module B was installed
      moduleB.js
      moduleB.css
      moduleB.partial.html

现在我遇到了问题。当用户安装模块A时，如何让AngularJS（和应用程序）在其文件夹下加载JS和CSS？是否有任何库可以按文件夹加载JS和CSS，以便我可以将代码放在index.html之内 <script src="/modules/**/*.js"></script> <link src="/modules/**/*.css"/>

否则，我必须在index.html中添加一些placesholders并在用户安装模块时更改内容，类似于 <script src="/app.js"></script>  <link src="/app.css"/> 

Answer 1

AngularJS不支持您想要的内容，但您可以查看Grunt或Gulp等构建工具，以便为您“构建”您的应用程序。在您的情况下，这些工具可以查找CSS文件并将它们连接成一个文件。这样，如果您添加新模块，则index.html不必更改。

GruntJS：http://gruntjs.com/

GulpJS：http://gulpjs.com/

我个人使用GulpJS，因为它看起来要快得多。我发现配置更容易：

包含我的配置文件。例如，任务“styles”将编译它在我指定的文件夹中找到的每个css文件，将它们连接起来，然后将它们放在分发文件夹中。

由于关于如何使用这些工具的初步学习曲线，您始终可以按照自己的进度整合gulp或grunt。现在你可以让它建立你的CSS文件＆amp;稍后通过连接JS来扩展它，并执行各种其他任务。在我看来，它值得学习，因为它可以节省你这么多时间和努力。

var gulp = require("gulp");
var concat = require("gulp-concat");
var html2js = require("gulp-ng-html2js");
var sass = require("gulp-sass");
var clean = require("gulp-clean");
var streamqueue = require("streamqueue");

var ngDepOrder = require("gulp-ng-deporder");

var paths = {
    "dist": "../server/staffing/static/",
    "vendor": ['vendor/underscore/underscore.js',
        'vendor/angular/angular.min.js',
        'vendor/angular-route/angular-route.min.js',
        'vendor/restangular/dist/restangular.min.js',
        'vendor/angular-animate/angular-animate.min.js',
        'vendor/angular-bootstrap/ui-bootstrap-0.7.0.min.js',
        'vendor/angular-bootstrap/ui-bootstrap-tpls-0.7.0.min.js',
        'vendor/angular-ui-router/release/angular-ui-router.min.js',
        'vendor/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js',
        'vendor/momentjs/min/moment.min.js'],
    "scripts": ['app/**/*.js'],
    "fonts": ['app-data/fonts/*.*'],
    "templates": ['app/**/*.html'],
    "styles": ['app/**/*.scss','vendor/angular-bootstrap-colorpicker/css/*.css']
}

gulp.task("watch", function () {
    gulp.watch('app/**/*.js', ['scripts']);
    gulp.watch('app/**/*.html', ['scripts'])
    gulp.watch('app/**/*.scss', ['styles']);
})

gulp.task("default", ["clean"], function () {
    gulp.start("scripts", "vendor", "styles", "fonts");
})

gulp.task("clean", function () {
    return gulp.src(paths.dist, {read: false})
        .pipe(clean({force: true}));
})

gulp.task("vendor", function () {
    gulp.src(paths.vendor)
        .pipe(concat("vendor.js"))
        .pipe(gulp.dest(paths.dist + "js/"));
});

gulp.task("scripts", function () {
    var stream = streamqueue({objectMode: true});
    stream.queue(gulp.src(paths.scripts)
        .pipe(ngDepOrder()));
    stream.queue(gulp.src(paths.templates)
        .pipe(html2js({moduleName: "templates"})));
    return stream.done()
        .pipe(concat("app.js"))
        .pipe(gulp.dest(paths.dist + "js/"))
});

gulp.task("styles", function () {
    gulp.src(paths.styles)
        .pipe(sass())
        .pipe(concat("staffing.css"))
        .pipe(gulp.dest(paths.dist + "css/"))
})

gulp.task("fonts", function () {
    gulp.src(paths.fonts).
        pipe(gulp.dest(paths.dist + "fonts/"))
})

Answer 2

查看angular generator的Slush，使用gulp-bower-files和gulp-inject执行我认为您想要的操作。您使用bower指定应用程序依赖项，并使用gulp-inject通过gulp收集和注入这些依赖项，然后在index.html中注入正确的链接/ src / style标记，这些标记看起来非常类似于上面的示例。模块的JS和CSS也被收集，最小化，连接和注入。它还编译部分并将其注入$ templateCache。

我已经使用它来使用类似于你的项目布局自动包含来自子文件夹模块/视图的依赖项。

请注意，所有供应商依赖项都需要是bower包，它们使用bower.json中的“main”属性指定其dist文件。有些软件包不能正确地执行此操作，但是您可以轻松地对软件包进行分叉并自行添加它们，然后在更新后的仓库中指向bower。

在AngularJS中的文件夹中加载JavaScript和CSS文件

2 个答案: