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 angular.js。在本文中，read and follow recommendations来自本文。否则，您实际上并不需要require.js

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

2 个答案: