在需要复杂交互的单页应用中，使用多个控制器可以帮助我们更好地组织代码和数据。在本文中，将介绍如何使用AngularJS实现单页应用中的多个控制器，并提供一些示例代码。
定义控制器
在AngularJS中，我们可以通过定义控制器来管理视图和数据。以下是一个简单的控制器定义：
----------------------- ---
--------------------------- ---------------- -
-------------- - ------- --------
---这里我们使用angular.module()函数来创建一个新的AngularJS模块，并使用.controller()函数来定义一个名为MyController的控制器。在控制器内部，我们将$scope.message设置为'Hello, world!'。
在HTML中使用控制器
一旦我们定义了控制器，我们就可以将其应用于HTML中的任何元素上。例如，在<body>标签中添加以下代码：
---- ----------------------------- -- ------- -- ------
这里我们使用了AngularJS的指令ng-controller来将MyController控制器应用于<div>元素中。我们还使用了双花括号语法({{ }})来显示$scope.message中的内容。
使用多个控制器
在单页应用中，我们可能需要使用多个控制器来处理不同的业务逻辑。例如，一个电子商务网站可能需要一个控制器来管理产品列表，另一个控制器来管理购物车。
以下是如何在单页应用中使用多个控制器的示例代码：
----------------------- ---
-------------------------------- ---------------- -
--------------- - -
- ----- --------- ------ --- --
- ----- -------- ----- ------ ---- --
- ----- ------- ------ --- -
--
--
----------------------------- ---------------- -
----------- - ---
---------------- - ----------------- -
--------------------------
--
---这里我们定义了两个控制器：ProductController和CartController。ProductController控制器负责管理产品列表，而CartController控制器负责管理购物车。
在HTML中，我们可以像这样使用这些控制器：
---- ----------------------------------
----
--- ------------------ -- ----------
-- ------------ -- - --- ------------- --
------- --------------------------------- -- -------------
-----
-----
------
---- -------------------------------
------------ ---------
----
--- ------------------ -- -------- ------------ -------
-----
------这里我们在两个不同的<div>元素中使用了不同的控制器。在ProductController控制器中，我们显示产品列表，并使用ng-click指令将产品添加到购物车中。在CartController控制器中，我们显示购物车中的产品列表。
结论
在单页应用中使用多个控制器可以帮助我们更好地组织代码和数据，并使得业务逻辑更加清晰易懂。除本文介绍的使用外，AngularJS还提供了很多其他方法来实现控制器之间的通信和协作。详见官方文档。
参考代码可见CodePen。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25167