AngularJS不支持你想要的東西,但是你可以看看Grunt或Gulp等構建工具,它們可以讓你“構建”你的應用程序.在您的情況下,這些工具可以查找CSS文件并將它們連接成一個文件.這樣,如果您添加新模塊,則index.html不必更改.

我個人使用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/"))

})

總結

以上是生活随笔為你收集整理的angular的html引入js,在AngularJS中的文件夹中加载JavaScript和CSS文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。