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

我有一个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 万维网/ index.html app.js 模块/ 模块A/--将在安装模块A时复制 moduleA.js 模块a.css moduleA.partial.html ModuleB/--将在安装模块B时复制 moduleB.js moduleB.css moduleB.partial.html 现在我有一个问题。当用户安装模块A时，如何让AngularJS（和应用程序）在其文件夹下加载JS和CSS？是否有任何库可以按文件夹加载JS和CSS，以便我可以将代码放入

index.html

likes

否则，我必须在

index.html

中添加一些placesholders，并在用户安装模块时更改内容，例如

---

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

GruntJS：

GulpJS：

就我个人而言，我使用GulpJS，因为它似乎要快得多&我发现配置起来更容易：

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

因为有一个关于如何使用这些工具的初始学习曲线，所以您总是可以按照自己的步调整合吞咽或咕噜。现在，您可以让它构建您的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/"))
})

检查一下，它使用gulp bower文件和gulp inject实现了我认为您想要的功能。您可以使用bower指定应用程序依赖项，gulp使用gulp inject收集并注入这些依赖项，然后gulp inject在index.html中注入适当的link/src/style标记，这些标记与您上面的示例非常相似。模块的JS和CSS也被收集、最小化、连接和注入。它还编译部分并将其注入$templateCache

我使用它自动包含子文件夹模块/视图中的依赖项，使用类似于您的项目布局

---

请注意，所有供应商依赖项都需要是使用bower.json中的“main”属性指定其dist文件的bower包。有些软件包不能很好地做到这一点，但你可以很容易地把软件包叉出来，自己添加，然后将bower指向更新后的回购协议

请使用正确的gulpjs url。不是gruntjs.com…：/如果依赖项是从nodejs项目的server.js文件加载的，那么这不是一个好的解决方案：

app.use（'/scripts'，express.static（uu dirname+'/app/scripts'）使用
app.use（'/*/*.js'，express.static（uu dirname+'/app/*/*.js'）导致控制台中的错误被中止