requirejs + angularjs 代码结构拆分在不同文件中

Question

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

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

在 module.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;
});

您可能也对angular-require-lazy感兴趣。

Answer 2

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

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

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

也可以看看angular code style，里面有很多正确写法的建议。

UPD：关于您的问题：如果您有一组应用程序常用的模块（我的意思是您有很多），那么您可能有兴趣将require.js 与@987654327 一起使用@。在这种情况下，read and follow recommendations 来自本文。否则，你真的不需要require.js