Загружать файлы JavaScript и CSS в папки в AngularJS

AngularJS не поддерживает то, что вы хотите, но вы можете взглянуть на инструменты сборки, такие как Grunt или Gulp, которые позволяют вам «создавать» ваше приложение за вас. В вашем случае эти инструменты могут искать файлы CSS и объединять их в один файл. Таким образом, ваш index.html не должен изменяться, если вы когда-либо добавляете новые модули.

GruntJS: http://gruntjs.com/

GulpJS: http://gulpjs.com/

Лично я использую GulpJS, поскольку он кажется намного быстрее, и мне было проще настроить:

Включил мой файл конфигурации ниже. Например, задача «стили» скомпилирует каждый файл 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/"))
})

Посмотрите угловой генератор для Slush, он делает то, что я думаю, вы хотите, используя файлы gulp-bower и gulp-inject. Вы указываете зависимости своего приложения с помощью bower, и они собираются и вводятся с помощью gulp с помощью gulp-inject, который затем вставляет в ваш index.html соответствующие теги link / src / style, которые очень похожи на ваши собственные примеры выше. JS и CSS модулей также собираются, минимизируются, объединяются и внедряются. Он также компилирует частичные файлы и вставляет их в $ templateCache.

Я использовал его для автоматического включения зависимостей из модулей / представлений подпапок с использованием макета проекта, аналогичного вашему.

Обратите внимание, что все зависимости вашего поставщика должны быть пакетами bower, которые указывают свои файлы dist с помощью атрибута main в bower.json. Некоторые пакеты не делают этого должным образом, но легко создать вилку пакета и добавить их самостоятельно, а затем указать на обновленное репо.