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

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 中添加一些占位符并在用户安装模块时更改内容，例如
<script src="/app.js"></script>
<!-- $$_JS_$$ -->
<link src="/app.css"/>
<!-- $$_CSS_$$ -->


Answer 1

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

GruntJS:http://gruntjs.com/

GulpJS:http://gulpjs.com/

我个人使用 GulpJS，因为它似乎更快并且我发现它更容易配置:

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

由于如何使用这些工具有一个初始学习曲线，因此您始终可以按照自己的节奏集成 gulp 或 grunt。现在，您可以让它构建您的 css 文件，然后通过连接 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/"))
})