我刚刚开始使用AngularJS 1.6.x项目,我现在尝试在组件中组织它。我已经设法用指令和模板做一些可接受的事情。但最后,我总是要在 index.html 中加入所有我的javascript。所以我的 index.html 变得非常大。
我的项目看起来像这样,但有很多行<script src=...
:
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="component1/ctrl.js"></script>
<script src="component1/subcomponent1/ctrl.js"></script>
<!-- many lines here -->
</head>
<body>
<component1></component1>
</body>
</html>
COMPONENT1 / ctrl.js
//import subcomponent1 from './component1/subcomponent1/ctrl'; << I want something like this
app.directive('component1', function() {
return {
restrict: 'E',
templateUrl: "component1/view.html",
scope: true
}
});
COMPONENT1 / view.html
Here is component 1.
<subcomponent1></subcomponent1>
依旧使用subcomponent1,component2和其他...
我怎样才能让我的组件递归导入他们需要的其他组件?理想情况下,这应该在文件 ctrl.js 。
中完成答案 0 :(得分:2)
您可以使用webpack,bundle-js或任何其他捆绑系统。我建议webpack现在它是最受欢迎的模块捆绑器。由于您使用的是nodejs,因此它不会那么困难。
由于在这里解释所有内容非常困难,我应用了一个很好的指南来设置webpack。
https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460
这是bundle-js:https://gist.github.com/rstacruz/1ff36e7ce207aef513cea1c3a9e5400d