AngularJS ：如何在多个文件中创建控制器

在本文中，我们将介绍如何在AngularJS中使用多个文件来创建控制器。AngularJS是一款流行的JavaScript框架，用于开发单页应用程序（SPA）。使用多个文件可以帮助我们更好地组织和维护项目代码，使其更具可读性和可维护性。

创建控制器文件

在AngularJS中，我们可以将控制器的逻辑代码分散到多个文件中。首先，我们需要创建一个主控制器文件，它将负责定义AngularJS应用程序的主要逻辑。我们可以将其命名为mainController.js。在该文件中，我们将定义一个AngularJS模块，并通过controller方法来创建一个控制器。下面是一个例子：

// mainController.js

// 创建AngularJS模块
var app = angular.module('myApp', []);

// 创建主控制器
app.controller('MainController', function($scope) {
  // 控制器逻辑代码
  // ...
});

导入主控制器文件

在HTML文件中，我们需要导入主控制器文件以使其生效。可以使用<script>标签将其导入。确保在导入之前，先导入AngularJS库文件。下面是一个例子：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Multiple Files</title>

  <!-- 导入AngularJS库文件 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

  <!-- 导入主控制器文件 -->
  <script src="mainController.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="MainController">
    <!-- 主控制器的HTML代码部分 -->
    <!-- ... -->
  </div>
</body>
</html>

创建其他控制器文件

除了主控制器文件外，我们可以创建其他多个控制器文件，每个文件负责不同的功能模块或页面。这样做有助于将代码分割成不同的文件，提高可读性和可维护性。下面我们将新建一个名为otherController.js的文件，其中包含一个辅助控制器的定义：

// otherController.js

// 获取主控制器所在的模块
var app = angular.module('myApp');

// 创建辅助控制器
app.controller('OtherController', function($scope) {
  // 控制器逻辑代码
  // ...
});

导入其他控制器文件

和导入主控制器文件类似，我们需要在HTML文件中导入其他控制器文件。确保导入的顺序正确，主控制器文件在前，其他控制器文件在后。下面是一个例子：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Multiple Files</title>

  <!-- 导入AngularJS库文件 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

  <!-- 导入主控制器文件 -->
  <script src="mainController.js"></script>

  <!-- 导入其他控制器文件 -->
  <script src="otherController.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="MainController">
    <!-- 主控制器的HTML代码部分 -->
    <!-- ... -->
  </div>

  <div ng-controller="OtherController">
    <!-- 其他控制器的HTML代码部分 -->
    <!-- ... -->
  </div>
</body>
</html>