requireJS + AngularJS代码结构拆分在不同的文件中

Question

我正在使用requirejs和Angular，我正在尝试创建一个应用程序结构，允许我将每个控制器/服务/指令等拆分到不同的文件中。这是我想要实现的结构：

src/
components/
    Navigation/
        index.js
        module.js
        NavigationController.js
        NavigationService.js

在模块中.js我想做这样的事情：

define(['angular', './NavigationService', './NavigationController'], function (angular, NavigationService, NavigationController) {
    'use strict';
    return angular.module('Myapp.Navigation', [])
        .controller('NavigationController', NavigationController)
        .service('NavigationService', NavigationService)
});

并在单独的 js 文件中定义控制器/服务定义。

问题是我不知道如何定义这些文件。我尝试过使用这种语法：

//NavigationService.js
define( function() {
            this.doNavigation = function () {
                console.log('I am navigating');
            }
    });

但看起来不起作用。你有没有见过这种使用 requirejs 的结构？

谢谢！

Answer 1

尝试：

//NavigationService.js
define([], function() {
    NavigationController.$inject = ['$scope', '$q', 'myOwnService', 'etc'];
    function NavigationController($scope, $q, myOwnService, etc) {
        ...
    }
    return NavigationController;
});

您可能还对角度要求懒惰感兴趣。

Answer 2

实际上，在单个应用程序的情况下，您不需要requirejs。角度中的顶层层次结构是应用程序。所有应用程序都有其模块集，并且angular从一开始就应该拥有它的所有源代码，因此您无需使用requirejs加载它。

相反，我建议您grunt与concat插件一起使用。它将把您应用程序的各部分组装在一起，并且每个应用程序都有一个文件。

然后，当你每个应用程序都有一个文件时，你可以用requirejs加载它，它有意义，但不能加载模块。

还要检查角度代码样式，它有很多关于如何以正确方式编写的建议。

UPD：关于您的问题：如果您有一组应用程序通用的模块（我的意思是您有很多模块），那么您可能有兴趣将require.js与angular.js一起使用。在这种情况下，请阅读并遵循本文中的建议。否则，你真的不需要require.js