模块化一个AngularJS应用后，如何在不需要输入大量脚本的情况下将整个项目包含在index.html中?标签

After modularizing an AngularJS app, how do you include the entire project in the index.html without having to type a ton of <script> tags

本文关键字：情况下 脚本 项目 包含 标签 html index 输入 一个 AngularJS 应用      更新时间：2023-09-26

我学习Angular已经有一段时间了，我正在寻找模块化应用的最佳方法。我认为我的理解是相当顺利，但我已经看了一段时间，似乎不能得到一个很好的答案，所有这些.js文件如何被包含在index.html中，而不只是手动输入一堆标签。我一直在研究Grunt/Gulp，并得到如何将整个应用程序合并到一个。js文件中，但对于开发，我猜你不想每次要更新应用程序时都重新运行Grunt或Gulp。

有许多不同的选项:gulp, grunt或webpack似乎是最受欢迎的。这些天我最喜欢用webpack。

一个好的设置通常会运行一个本地节点服务器，它会在每次更改文件时自动刷新浏览器。

有很多自动生成器可以帮你设置这些，或者你也可以在github上找到简单的例子。

基本思路是

  1. 连接你所有的js文件(按照适当的顺序，模块定义在控制器/服务之前)
  2. 将其最小化用于生产
  3. 复制到固定路径
  4. 在html
    5. 中包含这个js文件
  5. 在开发过程中，让你的grunt/gulp脚本监视js文件中的变化，并重新运行上述步骤，这样你就不必手动运行grunt/gulp任务。

现在，如果你正在使用gulp，这里是你通常如何处理以上步骤

gulp.task('process-js', function () {
  return gulp.src(jsFiles, {base: './'})
    .pipe(gulpif(isProd, concat('all.min.js'), concat('all.js')))
    .pipe(gulpif(isProd, uglify({mangle: true, preserveComments:    'some'})))
    .pipe(gulp.dest(deployFolder + '/static/js'))
});

其中jsFiles是包含angular应用js文件的文件/文件夹数组

var jsFiles = [
'!static/js/**/*.js',
'!static/js/plugin/**/*.*',
'app/index/**/*module.js',
'app/index/**/*config.js',
'app/index/**/*ctrl.js'
];

注意:使用!前缀将某些文件/文件夹排除在处理之外。

isProd只是一个标志，表明您是在准备生产还是开发。

在开发期间，我还使用BrowserSync来监视对我的js文件的任何更改，并重新运行gulp任务来准备all.js。它还可以在浏览器中自动刷新页面。

gulp.task('run', function () {
browserSync({
    server: {
        baseDir: deployFolder
    },
    open: true,
    browser: ['google chrome'],
    files: deployFolder + '/**/*',
    watchOptions: {
        debounceDelay: 2000
    }
});
gulp.watch(jsFiles, ['process-js']);
});
gulp.task('default', function () {
  runSequence(
    'clean',
    'run'
  );
});

Gulp/Grunt to concat all your angular files .

创建2个任务

  • dev build task
    • concat到一个文件BUT don't uglify。
  • a distribution/production task与dev 1相同，但这个uglify是concatenated file。
相关文章：