Question

我刚刚开始使用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 。

中完成

Answer 1

您可以使用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

如何在angularjs

1 个答案: