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

Question

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

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 文件中定义 controller/service 定义。

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

//NavigationService.js
define( function() {

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

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

谢谢！

Answer 1

其实，单人申请不需要requirejs。 angular 中的顶级层次结构是应用程序。所有应用程序都有自己的模块集，angular 应该从一开始就拥有它的所有源代码，因此您无需使用 requirejs 加载它。

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

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

同时检查angular code style，它有很多关于如何正确书写的建议。

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

Answer 2

尝试：

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

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

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

requirejs + angularjs code structure split in different files

javascript

requirejs

angularjs