AngularJS 模块和控制器在不同的文件中答案

【问题标题】：AngularJS module and controller in different filesAngularJS 模块和控制器在不同的文件中
【发布时间】：2018-01-15 16:34:32
【问题描述】：

我想将我的控制器移动到它自己的文件中，同时将模块配置文件放在单独的文件中

现在我有这个代码：

# Module part
voucherModule = angular.module(
    'Backoffice.Vouchers'
    [
        'Core.Repository.Voucher'
        'ui.router'
    ]
)

voucherModule.config ($stateProvider) ->
    $stateProvider
        .state 'vouchers',
        url: '/vouchers'
        data:
            title : 'Vouchers'
        views:
            "main":
                controller: 'VoucherListController'
                templateUrl: 'views/vouchers/voucher-list.html'

# Controller part. Below should go to different file.

class VoucherListController extends BaseController
    @register voucherModule
    @inject '$scope', '$state', '$rootScope', 'VoucherRepository'

我有很多 .coffee 文件使用 gulp 编译成单个文件。

当我剪切控制器代码并将其移动到不同的文件时，我收到以下错误：

错误：[$injector:modulerr] 无法实例化模块 Backoffice.App，原因是：
[$injector:modulerr] 无法实例化模块 Backoffice.Shop 由于：
[$injector:nomod] 模块“Backoffice.Shop”不可用！您要么拼错了模块名称，要么忘记加载它。

如您所见，它甚至不是相关的模块错误。我看到这次编译不一样了：

--- BEFORE ---
var VoucherListController, voucherModule;

voucherModule = angular.module('Backoffice.Vouchers', ['Core.Repository.Voucher', 'ui.router']);
voucherModule.config(function($stateProvider) {
  return $stateProvider.state('vouchers', {/*..*/});
});

VoucherListController = (/* controller-code */)(BaseController);

--- AFTER ---
var VoucherListController;

VoucherListController = (/* controller-code */)(BaseController);

var voucherModule;
voucherModule = angular.module('Backoffice.Vouchers', ['Core.Repository.Voucher', 'ui.router']);
voucherModule.config(/*..*/);

Gulp 文件任务：

gulp.task('build-core', function () {
    return gulp.src(sources.coffee.core) // AngularCore/**/*.coffee
        .pipe(continueOnError(coffee({bare:true})).on('error', gutil.log))
        .pipe(concat('core.js'))
        .pipe(gulp.dest(destinations.javascript.core)) // app/js/lib/
});

有人可以帮我找出问题所在吗？基本上模块和控制器代码切换位置和var 位置移动。

【问题讨论】：

你能贴出创建单个构建文件的 gulp 任务的代码吗？
@lzagkaretos 我已经添加了任务代码。
我会尝试将 sources.coffee.core 定义为一个数组，例如：['AngularCore/**/module.coffee', 'AngularCore/**/!(module)*.coffee']。因此，模块先于服务和控制器。

标签： angularjs gulp coffeescript

【解决方案1】：

正如 Izagkaretos 所说，我只需要在 gulp 配置中将路径拆分为多个部分，然后一切正常。

gulp.task('build-core', function () {
    return gulp.src(sources.coffee.core) // [AngularCore/**/*Module.coffee, AngularCore/**/*.coffee]
        .pipe(continueOnError(coffee({bare:true})).on('error', gutil.log))
        .pipe(concat('core.js'))
        .pipe(gulp.dest(destinations.javascript.core)) // app/js/lib/
});

【讨论】：