Question

我正在尝试学习Angular js我正在关注angular-phonecat教程。我正在尝试在控制器文件夹中组织我的控制器，因为我正在使用这种结构：

 app/js
     js/controllers/
        Ctrl1.js
        movies.js

这里的一切工作正常，但是有一个问题，假设我有100个控制器，那我怎么能在我的html文件中使用它们，如下所示：

<!doctype html>
        <html lang="en" ng-app="phonecatApp">
        <head>
          <meta charset="utf-8">
          <title>My HTML File</title>
          <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
          <link rel="stylesheet" href="css/app.css">
          <script src="bower_components/angular/angular.js"></script>
          <script src="bower_components/angular-route/angular-route.js"></script>
          <script src="js/app.js"></script>
          <script src="js/controllers.js"></script>
          <script src="js/controllers/movies.js"></script>
          <script src="js/controllers/Ctrl1.js"></script>


        </head>
        <body>

          <div ng-view></div>

        </body>
        </html>

有什么办法可以减少这行中脚本的调用，如何在一个调用中将它放在一个调用中，这两个文件可以通过一个调用，或者有任何其他有效的方法：

<script src="js/controllers/movies.js"></script>
<script src="js/controllers/Ctrl1.js"></script>

Answer 1

看看gulp。 Gulp允许您将所有相关文件捆绑到一个文件中，您可以在index.html中参考。例如，在我的gulpfile中，我为所有JS文件执行此操作：

gulp.task('js', function() {
 return gulp.src('./src/js/**/*.js').pipe(concat('main.js').on('error', gutil.log))
    .pipe(gulp.dest('dist/js').on('error', gutil.log))
});

这会将它们全部放入main.js文件夹中名为dist的单个文件中，然后我可以将其部署。

哦 - 我们可以在索引中引用这个文件，如下所示：

 %body.container-fluid
    %ui-view
  %script{ src: "js/main.js", async: true }

注意 - 这是HAML语法而不是纯HTML。另外 - 请记住，gulp是由设计用于执行不同操作的不同插件制作的 - 每个插件都需要安装：

var uglify          = require('gulp-uglify'),
// Allows me to use it in the gulpfile as uglify.foo()

Answer 2

我找到了解决这个问题的更好方法。只需完成本教程：http://yeoman.io/codelab/install-generators.html您将了解如何安装yoman，这里他们正在使用grunt，它将为您生成所有艰苦的工作。

您只需运行此命令：

grunt build
grunt serve:dist

它将在dist目录中创建一个完全缩小的js和css，你可以对该目录做任何你想做的事情。您还可以观看此视频：https://www.youtube.com/watch?v=gKiaLSJW5xI。我希望通过这种方式您可以更好地整理文件。

如何在Angular Js中组织控制器？

2 个答案: