在AngularJS的文件夹中加载JavaScript和CSS文件 [英] Load JavaScript and CSS files in folders in AngularJS

问题描述

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

I have an AngularJS application and in the future, some developers in other teams will develop modules that will be installed as parts of it. So I defined the folder structure as below.

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"/>

Now I have a problem. When user installed module A, how to let AngularJS (and the application) load JS and CSS under its folder? Is there any library can load JS and CSS by folder so that I can put the code in index.html likes <script src="/modules/**/*.js"></script> <link src="/modules/**/*.css"/>

否则，我必须在index.html中添加一些占位符，并在用户安装模块时更改内容，例如 <script src="/app.js"></script> <!-- $$_JS_$$ --> <link src="/app.css"/> <!-- $$_CSS_$$ -->

Otherwise, I have to add some placesholders in index.html and change the content when user installed a module, something like <script src="/app.js"></script> <!-- $$_JS_$$ --> <link src="/app.css"/> <!-- $$_CSS_$$ -->

推荐答案

AngularJS不支持您想要的东西，但是您可以看一下诸如Grunt或Gulp之类的构建工具，这些工具可以让您为您构建"应用程序.在您的情况下，这些工具可以查找CSS文件并将它们连接到一个文件中.这样，如果您添加了新模块，则不必更改index.html.

AngularJS doesn't support what you want, but you could take a look at build tools such as Grunt or Gulp that let you "build" your application for you. In your case, these tools can look for CSS files and concatenate them into one single file. This way your index.html does not have to change if you ever add new modules.

GruntJS: http://gruntjs.com/

GulpJS: http://gulpjs.com/

我个人使用GulpJS，因为它看起来要快得多&我发现它更易于配置:

Personally I use GulpJS, since it seems to be much faster & I found it easier to configure:

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

Included my configuration file below. For example, the task "styles" will compile every css file it finds in the folders I specified, concatenate them, and drop them in the distribution folder.

由于在使用这些工具方面存在初步的学习曲线，因此您始终可以按照自己的步调整合gulp或grunt.现在，您可以让它构建您的CSS文件&以后也可以通过连接JS来扩展它，并执行其他各种任务.我认为，它值得学习，因为它可以为您节省大量时间和时间.努力.

Since there is an initial learning curve on how to use these tools, you can always integrate gulp or grunt at your own pace. For now you could let it build your css files & later expand it by concatenating JS as well and do various other tasks. In my opinion, its worth learning as it saves you so much time & effort.

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/"))
})

这篇关于在AngularJS的文件夹中加载JavaScript和CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！