在 AngularJS 中，控制器是应用程序中的一个重要组成部分。它们用于管理应用程序状态和行为，并连接视图和模型。当应用程序变得越来越大并且需要更多的控制器时，将所有代码都放在一个文件中会使代码难以维护。因此，在这种情况下，将每个控制器放在单独的文件中可以使代码更加有条理和易于管理。在本文中，我们将学习如何创建独立的 AngularJS 控制器文件。
步骤
- 在项目中创建一个新的文件夹，以便存储您的控制器文件。例如，您可以创建一个名为
controllers的文件夹。 - 在该文件夹中，为每个控制器创建一个新的
.js文件。例如，如果您有一个名为MainController的控制器，则应该在controllers文件夹中创建一个名为MainController.js的文件。 - 在每个控制器文件中，定义一个控制器函数。例如，以下是一个简单的
MainController.js文件：
-- -------------------- ---- -------
----------- -
-------
----------------
----------------------------- ----------------
-------- ---------------- -
--- -- - -----
-- ---------- ---- ---- ----
-
-----请注意，在这个例子中，我们使用了一个自执行函数来避免污染全局命名空间。
- 然后，在应用程序中引入这些控制器文件。这可以通过将以下代码添加到您的应用程序主文件中来完成：
-- -------------------- ---- -------
----------- -
----------------------- -
-- ---- -- ------------ ----
---
-- ------ ----------- ----
-----------------------
----------------------------- ----------------
-------- ---------------- -
-- ---------- ---- ---- ----
-
-----请注意，我们现在不需要在主文件中编写任何控制器代码。相反，我们只需从它们各自的文件中导入它们即可。
示例代码
以下是一个完整的示例，展示如何在 AngularJS 应用程序中创建独立的控制器文件。
index.html
-- -------------------- ---- -------
------
------
--------- --------- -----------
------- ------------------------------------------------------------------------------------
------- ----------------------
------- ---------------------------------------------
-------
----- ---------------
---- ----------------------------- -- ----
------ -------- -------
----- -------------- ------
------
-------
-------app.js
(function() {
angular.module('myApp', []);
})();MainController.js
-- -------------------- ---- -------
----------- -
-------
----------------
----------------------------- ----------------
-------- ---------------- -
--- -- - -----
-------- - --- --------- -----
-------------- - -------- -- -- ------
-
-----在这个示例中，我们将 MainController 放在了一个独立的文件中，并在主文件 app.js 中引入了它。然后，在 index.html 文件中，我们使用了 ng-controller 指令来绑定控制器到视图。
结论
在 AngularJS 应用程序中创建独立的控制器文件可以使代码更加有条理和易于管理。通过遵循上述步骤，您可以轻松地为每个控制器创建单独的文件，并将它们导入到您的应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25015