当你开始开发 AngularJS 应用程序时，通常会将所有的 JavaScript 代码放在一个文件中。但是，随着应用程序变得越来越复杂，这种方式会使代码难以维护和扩展。为了更好地组织你的代码，你应该将它们分成不同的文件。AngularJS 种子项目（seed）提供了一种良好的实践方法，通过将代码分成几个文件来帮助你更好地管理和组织代码。
应用架构
在将代码分成多个文件之前，让我们先了解一下 AngularJS 应用程序的基本结构。AngularJS 应用程序由以下组件组成：
- 模块（Module）
- 控制器（Controller）
- 指令（Directive）
- 过滤器（Filter）
- 服务（Service）
模块是应用程序的基本构建块，控制器、指令、过滤器和服务都可以归属于一个模块。下面是一个简单的 AngularJS 应用程序示例，其中包含一个模块、一个控制器和一个服务：
-- -------------------- ---- -------
-- ------ ------- ---
--- ----- - ----------------------- ----
-- - ------- --------- -------- ----
-------------------------- ---------- ------------ ---------------- ---------- -
-------------- - -----------------------
----
-- - ------- --------- ----------- ---
-------------------------- ---------- -
--------------- - ---------- -
------ ------- --------
--
---将代码分成多个文件
现在，我们将上述示例代码拆分成不同的文件。按照惯例，我们将控制器、指令、过滤器和服务分别放入单独的文件中，然后在主应用程序文件（通常称为 "app.js"）中引用它们。
我们可以创建一个 "controllers.js" 文件来存放控制器，包含以下内容：
angular.module('myApp')
.controller('MyCtrl', ['$scope', 'MyService', function($scope, MyService) {
$scope.message = MyService.getMessage();
}]);接下来，我们可以创建一个 "services.js" 文件来存放服务，包含以下内容：
angular.module('myApp')
.service('MyService', function() {
this.getMessage = function() {
return 'Hello, world!';
};
});最后，我们需要在主应用程序文件中引用这些文件：
-- -------------------- ---- -------
-- -- --------
----------------------- ----
-- -- ----------------
-----------------------
--------------------- ---------- ------------ ---------------- ---------- -
-------------- - -----------------------
----
-- -- -------------
-----------------------
--------------------- ---------- -
--------------- - ---------- -
------ ------- --------
--
---现在我们的代码更易于管理和维护。
结论
将 AngularJS 应用程序的 JavaScript 代码分成多个文件可以使代码更易于管理和维护。通过使用种子项目实践，你可以更好地组织你的代码并确保它们之间正确地交互。希望这篇文章能够帮助你更好地组织你的 AngularJS 应用程序代码！
示例代码
- app.js:
angular.module('myApp', []);- controllers.js:
angular.module('myApp')
.controller('MyCtrl', ['$scope', 'MyService', function($scope, MyService) {
$scope.message = MyService.getMessage();
}]);- services.js:
angular.module('my
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/25136) ，转载请注明来源
[https://www.javascriptcn.com/post/25136](https://www.javascriptcn.com/post/25136)