Question

我做了以下事情：

使用正确的约定创建了一个模块：var myApp = angular.module('myApp', []);正如您所见，我注意将[]作为第二个参数
我在同一个文件中创建了一些控制器，它完全符合以下约定：var myApp = angular.module('myApp').Controller(...)

现在，在清理我的代码时，我决定将这些控制器移动到单独的文件中，我的模块开始失败并出现以下错误：

aught错误：[$ injector：nomod]模块'maintenance.portability.module' 不可用！您要么错误拼写了模块名称，要么忘了加载它。如果注册模块，请确保指定依赖作为第二个参数。（...）

听起来它是在模块文件之前加载单独的控制器文件。在浏览器尝试加载单独的Controller文件之前，如何确保加载模块文件？

Answer 1

使用模块可能有更正确的方法，但我只是使用gulp将所有内容连接到同一个文件中。这是我的gulpfile：

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var babel = require('gulp-babel');

gulp.task('default', ['scripts', 'scripts:watch']);

gulp.task('scripts', function() {
  return gulp.src('path/to/javascript/files/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(concat('app.min.js'))
    .pipe(uglify({
      mangle: false
    }))
    .pipe(gulp.dest('./public/js'));
});

gulp.task('scripts:watch', function () {
  gulp.watch('path/to/javascript/files/**/*.js', ['scripts']);
});

这将获取所有JavaScript文件，将它们转换为es5，将它们连接在一起，最小化它们，然后将它们放在公共JavaScript文件夹中进行部署。每当你保存一个javascript时，监视任务就会执行此操作，只要你已经运行了gulp。确保你将mangle设置为false，在我的经验中，angular特别是变量名。

当我在单独的文件中定义Angular控制器时，它会在Module文件之前加载控制器文件

1 个答案: