AngularJS - 模块

你好，未来的程序员们！今天，我们将深入AngularJS模块的世界。如果你是编程新手，不用担心；我会一步一步地引导你，就像我多年来教导无数学生一样。让我们一起开始这段激动人心的旅程！

AngularJS - Modules

AngularJS模块是什么？

想象一下你正在搭建一个巨大的乐高结构。你可能会创建一些更小、更易于管理的部分，然后再将它们组合起来，而不是试图一次性构建所有东西。这正是AngularJS中模块的作用！

在AngularJS中，模块是应用程序不同部分的容器。它们帮助你组织代码，使其更易于维护和理解。你可以把它们想象成整齐标记的盒子，用来存放应用程序的不同功能。

应用程序模块

应用程序模块就像包含所有其他盒子的主盒子。这是你的AngularJS应用程序的起点。让我们创建我们的第一个应用程序模块：

var myApp = angular.module('myApp', []);

这一行发生了什么：

angular.module() 是一个创建新模块的函数。
'myApp' 是我们给模块起的名字。
空数组 [] 是我们列出模块可能依赖的其他模块的地方（稍后会详细介绍）。

控制器模块

现在我们有了主盒子（应用程序模块），让我们在其中添加一些小盒子。其中之一是控制器模块。在AngularJS中，控制器管理应用程序的数据。下面是如何创建一个控制器的示例：

myApp.controller('MyController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

让我们分解一下：

myApp.controller() 向我们的 myApp 模块添加了一个新的控制器。
'MyController' 是我们给这个控制器起的名字。
函数定义了这个控制器的作用。
$scope 是一个特殊的对象，允许控制器与视图（HTML）进行通信。

使用模块

现在我们已经创建了模块，我们如何实际使用它们呢？其实比你想象的要简单！你只需要在HTML中引用它们。下面是如何操作的：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的 AngularJS 应用</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

在这里注意几个关键点：

ng-app="myApp" 告诉AngularJS应用程序从这里开始。
ng-controller="MyController" 将我们的控制器应用于主体。
{{message}} 将显示我们在控制器中定义的消息。

示例

让我们用一个稍微复杂一点的例子把所有东西放在一起。我们将创建一个简单的待办事项列表应用程序：

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: '学习 AngularJS', done: false},
{text: '构建一个应用', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

以下是相应的HTML代码：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>待办事项列表</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>待办事项列表</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="添加一个新待办事项">
<input type="submit" value="添加">
</form>
<script src="app.js"></script>
</body>
</html>

输出

当你运行这段代码时，你将看到一个简单的待办事项列表应用程序。你可以添加新的待办事项，并在完成后勾选它们。魔法发生在我们的模块（在app.js中定义）和HTML之间的交互中。

结论

就这样！我们已经穿越了AngularJS模块的世界，从基本概念到一个工作的待办事项列表应用程序。记住，模块就像乐高积木——它们帮助你一步一步地构建复杂的结构。在你继续你的AngularJS冒险时，你会发现更多使用模块来创建强大、高效Web应用程序的方法。

继续练习，保持好奇心，最重要的是，享受编码的乐趣！谁知道呢？下一个革命性的应用可能就在你的指尖！

方法	描述
angular.module()	创建一个新的模块
module.controller()	向模块添加一个新的控制器
ng-app	指令用于自动引导一个AngularJS应用程序
ng-controller	指令用于指定一个控制器
ng-repeat	指令用于重复一组HTML元素
ng-model	指令用于将输入绑定到变量
ng-submit	指令用于指定表单的提交行为
ng-class	指令用于动态设置CSS类

Credits: Image by storyset