Javascript 如何将RequireJS模块集成到AngularJS应用程序中？

我想将RequireJS模块集成到AngularJS应用程序中。下面您可以看到一个示例代码。如何从我的

app.js

中的

Module.js

加载

Module

编辑：看看我自己发布的答案。你对此有何评论

//module.js
定义（'模块'，[]，函数（）{
返回{
init:function（）{
log（“模块已创建！”）；
}
};
});
//app.js
var-app=angular.module（'app'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
//我希望模块在这里可用
$scope.data='app'；
});
由于app.js只是一个脚本文件，所以您可以使用

require(['Module'], function(Module) {
     Module.init();
})

将它变成一种混合应用程序？
以下是如何将RequireJS模块和AngularJS模块系统结合使用

我将每个AngularJS组件保存在一个单独的require模块中，以便您可以在需要时加载它。由于需要依赖性，RequireJS将确保加载当前angular模块中所需的所有其他angular模块

utils.getDeps
将使用requireJS依赖项为当前角度模块自动创建角度模块依赖项数组


define（'listModule'，['angular'，'jquery'，'utils'，'service']，函数（ng，$，utils）{
变量moduleInfo={
moduleName:'listModule'，
deps:utils.getDeps（参数）
};
角度.module（moduleInfo.moduleName，moduleInfo.deps）
.directive（'list'，function（）{
返回{
限制：'E'，
模板：“
{{item.name}-{{item.car}
”，
控制器：功能（范围、服务）{
$scope.slist=service.getCustomers（）；
}
}
});
返回模块info；
});
定义（'service'，['angular'，'jquery'，'utils']，函数（ng，$，utils）{
变量moduleInfo={
moduleName:'serviceModule'，
deps:utils.getDeps（参数）
};
角度.module（moduleInfo.moduleName，moduleInfo.deps）
.service（'service'，function（）{
this.getCustomers=函数（）{
返回[
{
名字：“杰克”，
汽车：“奥迪”
},
{
名称：'Rekha'，
汽车：“梅赛德斯”
}
];
};
});
返回模块info；
});
定义（'utils'，['jquery']，函数（$）{
var obj={}；
obj.getDeps=函数（args）{
返回$.map（参数，函数（e）{
返回e&e.moduleName；
});
};
返回obj；
});
require.config({
路径：{
“jquery”：”https://code.jquery.com/jquery-1.11.3.min',
“角度”：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min'
},
垫片：{
'angular'：{exports:'angular'，deps:['jquery']}，
'jquery'：{exports:'jquery'}
}
});
require（['angular'，jquery'，utils'，listModule'，service']，函数（angular，$，utils）{
angular.module（'mainApp'，utils.getDeps（参数））；
元素（文档）.ready（函数（）{
angular.bootstrap（$（'main'），['mainApp']）；
});
});
目前，我的解决方案是在加载所需模块后手动引导应用程序


//module.js
定义（'模块'，[]，函数（）{
返回{
init：函数（elm，数据）{
elm.innerHTML=JSON.stringify（数据）；
}
};
});
//app.js
//让它成为需要的应用程序
require（['Module']，函数（Module）{
var-app=angular.module（'app'，[]）；
应用程序指令（'module'，function（）{
返回{
范围：{
数据：'=数据'
},
链接：函数（作用域、elm、attr）{
Module.init（elm[0]，scope.data）；
}
}
});
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.data={
类型：“块”
};
});
//手动初始化
元素（文档）.ready（函数（）{
引导（文档，['app']）；
});
});

它并没有直接回答您的问题，但您可能会发现它很有趣。对于我的案例来说，它有点设计过度。然而，我找到了一个非常类似的解决方案。@RuslanasBalčIūnas不，当你有这么多组件的大型应用程序时，这是最好的选择。在整个angularjs应用程序中，我们有超过300个组件。在这个示例中，我使用了名为
的define
，所以您看不到它的好处，但在实际应用中，每个模块都位于不同的文件中，您可以使用相对路径引用它们。可能在你的情况下，这可能是过度设计。我有一个真正的应用程序在头脑中，我只想使用一个模块。把它改写成一个角度模块是没有意义的。这是一个音频应用程序。如果你只有一个或两个模块，那么我同意你不需要这样的架构。这是一个很好的答案。但一开始有点难理解，因为它没有使用我的任何有问题的代码。也许有一天我会同意你的观点。我还得考虑一下。